I'm making an accordion pattern and I'm having trouble with changing the icon of the active state

I'm making an accordion and I already have everything ready. It's responsive and it behaves the way I want it to. But I'm still looking for a way to change the icon next to the button. I have tried a bunch of stuff and just can't find a way to do it (and it isn't that relevant but does somebody know why when my accordion opens or closes the background moves? I would appreciate if somebody knows. If not, no biggie.) Here's what's happening, how it should be looking, the codepen, and the repository (because all the images are local and it looks weird on codepen. There's a GitHub page on the repository). Thanks in advance. norwyx.github.io/faq-accordion/ https://codepen.io/norwyx/pen/poYqvvR https://github.com/Norwyx/faq-accordion
GitHub
GitHub - Norwyx/faq-accordion
Contribute to Norwyx/faq-accordion development by creating an account on GitHub.
No description
74 Replies
MarkBoots
MarkBoots9mo ago
you can do the same thing that you are doing with the collapse open. just ad a class that changes wich one of the icons is visable for example
.accordion__question:not(.open) .minus--icon,
.accordion__question.open .plus--icon {
display: none;
}
.accordion__question:not(.open) .minus--icon,
.accordion__question.open .plus--icon {
display: none;
}
you do need to be more specific in the css with the 'open' class which you use for the accordion collapse combine the 2 classes in the selector: .accordion__collapse.open{ ... } in the JS you just have to add this in the same if-statements that you already have
item.classlist.add('open')
item.classlist.remove('open')
item.classlist.add('open')
item.classlist.remove('open')
Norwyx
Norwyx9mo ago
I'm constantly running into this error
No description
Norwyx
Norwyx9mo ago
Maybe it is the way I'm accessing the 2 buttons?
Norwyx
Norwyx9mo ago
Is this the correct way?
No description
Norwyx
Norwyx9mo ago
I tried doing it inside of the forEach but I tought the scope was fucking up everything so I tried just setting it up on the top of the document.
Norwyx
Norwyx9mo ago
I'm actually accesing the elements, i just cant seem to edit them
No description
b1mind
b1mind9mo ago
Have you thought about using details/summary. Then using CSS to style and change the icon. It will let you just target [open] state faik
Norwyx
Norwyx9mo ago
Hey there, I already fixed that, what I'm trying to do now is so my godamn icon doesnt move when active. Let me show you
Norwyx
Norwyx9mo ago
Norwyx
Norwyx9mo ago
I don't get it I'm trying to play with the height, maybe it's a flex problem? I tried to also play with the width of the question. I may be also thinking it's because the .accordion__question has a width of 100%
b1mind
b1mind9mo ago
Sidenote: Please don't put overflow hidden on body 🥲 Have you updated your pen?
Norwyx
Norwyx9mo ago
Let me do it Why is that?
b1mind
b1mind9mo ago
Because it's terrible 😔 you make it not responsive I can't scroll down in this case. It's a really bad practice outside knowing when you need it.
Norwyx
Norwyx9mo ago
I changed so it only applies to 1440px and above bc it was looking terrible when you activated the button, it would display the scrollbar and I didn't want it. Is there anyway to achieve the same without it? https://codepen.io/norwyx/pen/poYqvvR I updated it and removed the overflow hahaha
b1mind
b1mind9mo ago
So you really just need to remove the display: block from .open class I'd use grid over flex for the .accordian question Understand you are overwritting the flex you have on it so it becomes block Also make sure you add aria-expanded states
Norwyx
Norwyx9mo ago
Damn, but if I remove the display block from the class wouldnt that mean that the js would stop working?
b1mind
b1mind9mo ago
Again I would have just used details/summary 🤷‍♂️ We have html for this and handles lots of it for you. Its not without its quirks too though 😄
Norwyx
Norwyx9mo ago
Imma look into that. I've never heard of it
b1mind
b1mind9mo ago
Yea that is why I'm telling you about it people sleep hard on HTML
Norwyx
Norwyx9mo ago
Damn now I don't know what to do tbh
b1mind
b1mind9mo ago
Well you have a working thing, again just remove the display:block; from .open You can add aria-expanded="true" false and remove it in JS
Norwyx
Norwyx9mo ago
Omg now it works wtf I just removed the .open and it worked immediately
b1mind
b1mind9mo ago
oh you are not even using the class ? If you want to collapse the others you will still need it
Norwyx
Norwyx9mo ago
Lmao I don't know I just commented out what you told me
No description
b1mind
b1mind9mo ago
cause like you said without the class you have nothing for state I was saying just remove* the display: block; xD cause you are turning your summary into a block from its flex state
Norwyx
Norwyx9mo ago
b1mind
b1mind9mo ago
right but now it will not auto collapse that is what you use .open for
Norwyx
Norwyx9mo ago
I mean, now it's working the way I needed it to work Wdym by autocolapse? Like close by itself?
b1mind
b1mind9mo ago
I thought you were using it to close others thats mb I def would look at details/summary though 😄
Norwyx
Norwyx9mo ago
Oh yeah yeah For sure That's the first thing I'm doing
b1mind
b1mind9mo ago
If you don't need to autoclose you can use html/css and no JS. the elements work this way by default
Norwyx
Norwyx9mo ago
Fuck, I didn't know Thats why I love this server
b1mind
b1mind9mo ago
❤️
Norwyx
Norwyx9mo ago
you guys know so much random stuff like not random in the way of useless but in the way of unknown
b1mind
b1mind9mo ago
I just value HTML/CSS above JS its the first front in FE
Norwyx
Norwyx9mo ago
For sure CSS is so powerful Ok so one thing before I close this In case I wanted it to work the way you said, instead of using a display: block on the .open, would using a display: flex work?
b1mind
b1mind9mo ago
You need to understand more about CSS maybe
Norwyx
Norwyx9mo ago
Oh thats for sure
b1mind
b1mind9mo ago
Do you use Devtools to debug?
Norwyx
Norwyx9mo ago
Yeah but not as much as you guys Do you run Mozilla?
b1mind
b1mind9mo ago
I mean Moz or Chromium is fine
Norwyx
Norwyx9mo ago
Ok, yeah I use chrome And I use it but not as much as you or Mark I recon is a pretty good tool to have on the arsenal and I've been getting my hands around it
b1mind
b1mind9mo ago
No description
b1mind
b1mind9mo ago
This is the open state of your button/summary Understanding how specificity, hierarchy, and the cascade is really important to how you author CSS I would make sure you have a clearn understanding of those things. Dev tools shows you how the styles are being applied/overwritten and ignored.
Norwyx
Norwyx9mo ago
Yeah I see I've been getting my hands back on frontend lately College really forces you to do backend only
b1mind
b1mind9mo ago
College most the times is teaching you old outdated crap anyway
Norwyx
Norwyx9mo ago
going into my second semester so trying to learn both front and back
b1mind
b1mind9mo ago
You want to make sure to only pass what you need and get that degree, but learn real modern web on your own time if that is what you want.
Norwyx
Norwyx9mo ago
Yeah, but my parents want me to go
b1mind
b1mind9mo ago
College won't prepare you (other than being a good student lol)
Norwyx
Norwyx9mo ago
I'm from a thirld world country so having a degree helps yeah for sure
b1mind
b1mind9mo ago
I mean it helps you everywhere but its become a worse thing over time.
Norwyx
Norwyx9mo ago
btw i've seen you here since 2021. did you go to college?
b1mind
b1mind9mo ago
College lesson plans not updated in over a decade LOL
Norwyx
Norwyx9mo ago
you seem like a pretty good dev
b1mind
b1mind9mo ago
No I couldn't afford it in my youths. I've grown up poor.
Norwyx
Norwyx9mo ago
Oh yeah they teach so much useless crap oh, you from the us or not?
b1mind
b1mind9mo ago
yea US I didn't goto College but I was a Web Advisor for one 🤣 (well one the divisions)
Norwyx
Norwyx9mo ago
I'm not rich either so i got to a normal college it's not that expensive for me because i have some aids wow, so you've worked in the field without a degree. how did u do it?
b1mind
b1mind9mo ago
applied and interviewed/tested into it that was long time ago though.. .I left for a decade and now been struggling to get into a role.
Norwyx
Norwyx9mo ago
Market is shitty I've heard
b1mind
b1mind9mo ago
Having to relearn the "modern web" past 4 years or so while freelancing It always has been honestly. The hype around it was more because of people saying we need more devs lol.
Norwyx
Norwyx9mo ago
Hey but it seems you're doing great bro, thats what matters. I''ve freelanced a little bit too but with wordpress
b1mind
b1mind9mo ago
Yea WP has been my bread/butter for the most part. 90% of the work I've done freelancing has been WP 😦
Norwyx
Norwyx9mo ago
Wp is great for client work. I dont think its worth it to code a landing page or an ecommerce
b1mind
b1mind9mo ago
Well website work* I've done lots of SEO away from it too
Norwyx
Norwyx9mo ago
for a small-medium business
b1mind
b1mind9mo ago
Yea its still one the best solutions to get a full fledge website up for a minimal price for small biz
Norwyx
Norwyx9mo ago
I've been trying to learn a little bit of SEO too
b1mind
b1mind9mo ago
We totally detrailed this thread haha ❤️
Norwyx
Norwyx9mo ago
Yeah thats the why I prefer WP you can charge a little bit less with less work ofc
b1mind
b1mind9mo ago
Mark it solved and if you have issues learning Details/summary make a new post 👍
Norwyx
Norwyx9mo ago
So its good for both the client and you yeah ok bro see you around
b1mind
b1mind9mo ago
cheers!
Want results from more Discord servers?
Add your server