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.
74 Replies
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
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
I'm constantly running into this error
Maybe it is the way I'm accessing the 2 buttons?
Is this the correct way?
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.
I'm actually accesing the elements, i just cant seem to edit them
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
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
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%
Sidenote: Please don't put overflow hidden on body 🥲
Have you updated your pen?
Let me do it
Why is that?
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.
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
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
Damn, but if I remove the display block from the class wouldnt that mean that the js would stop working?
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 😄
Imma look into that. I've never heard of it
Yea that is why I'm telling you about it
people sleep hard on HTML
Damn now I don't know what to do tbh
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
Omg now it works
wtf
I just removed the .open and it worked immediately
oh you are not even using the class ?
If you want to collapse the others you will still need it
Lmao I don't know I just commented out what you told me
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
right but now it will not auto collapse
that is what you use .open for
I mean, now it's working the way I needed it to work
Wdym by autocolapse?
Like close by itself?
I thought you were using it to close others thats mb
I def would look at details/summary though 😄
Oh yeah yeah
For sure
That's the first thing I'm doing
If you don't need to autoclose you can use html/css and no JS.
the elements work this way by default
Fuck, I didn't know
Thats why I love this server
❤️
you guys know so much random stuff
like not random in the way of useless
but in the way of unknown
I just value HTML/CSS above JS
its the first front in FE
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?
You need to understand more about CSS maybe
Oh thats for sure
Do you use Devtools to debug?
Yeah but not as much as you guys
Do you run Mozilla?
I mean Moz or Chromium is fine
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
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.
Yeah I see
I've been getting my hands back on frontend lately
College really forces you to do backend only
College most the times is teaching you old outdated crap anyway
going into my second semester so trying to learn both front and back
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.
Yeah, but my parents want me to go
College won't prepare you (other than being a good student lol)
I'm from a thirld world country so having a degree helps
yeah for sure
I mean it helps you everywhere but its become a worse thing over time.
btw i've seen you here since 2021. did you go to college?
College lesson plans not updated in over a decade LOL
you seem like a pretty good dev
No I couldn't afford it in my youths. I've grown up poor.
Oh yeah they teach so much useless crap
oh, you from the us or not?
yea US
I didn't goto College but I was a Web Advisor for one 🤣 (well one the divisions)
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?
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.
Market is shitty I've heard
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.
Hey but it seems you're doing great bro, thats what matters. I''ve freelanced a little bit too
but with wordpress
Yea WP has been my bread/butter for the most part.
90% of the work I've done freelancing has been WP 😦
Wp is great for client work. I dont think its worth it to code a landing page or an ecommerce
Well website work* I've done lots of SEO away from it too
for a small-medium business
Yea its still one the best solutions to get a full fledge website up for a minimal price for small biz
I've been trying to learn a little bit of SEO too
We totally detrailed this thread haha ❤️
Yeah thats the why I prefer WP you can charge a little bit less with less work ofc
Mark it solved and if you have issues learning Details/summary make a new post 👍
So its good for both the client and you
yeah ok bro
see you around
cheers!