Exactly, this kind of code is a really simple way to achieve click-to-expand effect.
It is the tag where you want to click.
It depends on your html structure to use “.siblings” or “.children”.
It is the tag where you want to expand after clicking 1.
After you click 1, the JS will expand your hidden contents, and add a new class “active” simultaneously.
If your hidden content has the new class “active”, which means your contents have been expanded, the JS will remove the class “active” and hide the contents.
In other words, it achieves click-to-hide effect.
This is unnecessary. You can delete it.
Can you explain why you also control the class active ? I thought the class display is already enough.
Because you need to add an new tag to let your dictionary know whether you have clicked or not.
Otherwise, you can’t hide your contents after you clicked.
This is really great and enlightening. It seems to me your function is on top of a jquery. Could you please explain why you use that jquery? Is there any part of your function dependent on that jquery?