The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript adding open/close symbol to accordion menu Reply To: adding open/close symbol to accordion menu


@ jwtgray – I don’t know any js myself much beyond innerHTML = Hello World, so I can only point you to a very light-weight script which I have been able to tweek and style with my limited ability.

The terms for use state that the content, including code may not be used without permission, but someone asked on the forum if they could use the code for a commercially project, and the developer very kindly said, go ahead. Here is the thread link
Find the user mrsa (30-Oct-11) and the answer two down. You would probably be allowed to use the accordion too. Just ask.

I added these two lines to the css to add an up and down triangle, but you can use whatever character you like.

.accordionItem h2::before {content:'\25B2'; padding-right:10px; font-size:0.8em; }
.accordionItem.hide h2::before {content:'\25BC'; font-size:0.8em; padding-right:10px; }

Here is one more tiny accordion which is free to use

Here too, you can add the characters in a similar way, though it is a bit more tricky. If you get stuck I can give you the css to add. If you need a nested accordion this is the one. The first cannot be nested.

You can crate an all CSS accordion, but from my experience, I have not been able to get them to work on touch screens. You will probably need a script for the function, and the two above are the smallest I’ve seen. Either way, the characters can be added in the CSS with ::before.