Reply To: adding open/close symbol to accordion menu

[judyofthewoods]

@ 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.
http://www.elated.com/articles/javascript-accordion/

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
http://www.elated.com/forums/topic/4717/
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
http://www.scriptiny.com/2009/03/accordion/

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.