vanilla-js-dropdown
vanilla-js-dropdown copied to clipboard
Add is-open class to the button when dropdown is open
Enables styling for the button specific to the open state, such as rotating the arrow.
@doubleedesign Hey Leesa, just wanted to ask what do you think about having the same openClass
for both the list and button? What's better in your opinion:
- Let them define
ul.openClass
andbutton.openClass
in the CSS and call it a day, or - Create a new class for buttons, i.e.
openClassButton
and rename the existing toopenClassList
, so we have two distinct classes each for its own element?
Thanks for the quick response @zoltantothcom!
I think both have their merits: I did #1 for simplicity, to not make more changes to the existing code than is necessary to achieve this feature, but your second suggestion is potentially more robust - there would be no confusion about what .is-open
is referring to in the CSS if it isn't targeted more specifically. I'm not sure what the best thing to call the button class would be though - maybe something like list-is-open
or dropdown-is-open
.
My first thought was about renaming .is-open
--> .is-open-list
and having the new .is-open-button
, but that can potentially break it for people who already have styles for .is-open
, so it's probably better to leave it as is. And the new one - for consistency with .is-selected
and .is-open
that's already there, I'd name it .is-open-btn
or something like that 🤷♂️