I have managed to come up with a solution(although its not very pretty).
In order to get the toggling of classes to work, you need to remove the code for .plus:after
and place into into the .vertical-line:after
class. Then when you remove the .vertical-line
from the elements class, it will turn it into a minus symbol.
You can see an example of how to manipulate css classes using the DOM (including toggling) here:
https://www.w3schools.com/jsref/prop_html_classname.asp
Trying to do this for more than one element is the tricky bit, but you already have much of the code that you need. The only bit that is really very complicated is traversing the DOM because it is quite long winded.
You can find a list of the DOM element objects properties here: https://www.w3schools.com/jsref/dom_obj_all.asp. Looking at your code, I assume that you have familiarity with some of them, but the ones that you particularly want to have a look at are: previousElementSibling and lastElementChild. I used one more to get it to work but, hopefully this will give you enough to get started.
Once you have managed to navigate to the element you want (I suggest you see what element you are targeting using console.log
.), all you need to do is set the elements class name(s) to get the plus or minus as desired. (HINT: when the panel body height changes, so will the plus or minus sign.)
Hopefully, this has given you enough to go on. I have forked your pen so if you get really stuck I will post a link to something that works. (having worked through it you might want to change plus
to minus
and vertical-line
to plus
to make the code function clearer.)
On a side note: some of the div’s in your html code don’t do anything that couldn’t be done on the inner element and this makes DOM traversal harder, so you might want to see what div’s you can get rid of to make things easier.
I hope I have helped (I don’t like posting full solutions unless really necessary, as they are counter productive in helping you learn to code- at least that is what I have found for my own learning), please do let me know if you get stuck and I will do my best to help.