adding open/close symbol to accordion menu

[jwtgray]

Is it too hard to add a open/close symbol to each and every level of this menu?

Like this

Whether → / ↓ or + / – or the actual text “open/close” does not matter. I’m only interested in the js side of things.

http://codepen.io/rbobrowski/pen/likvA

[Paulie_D]

Very easy…what have you tried?

[jwtgray]

I know nothing about JS, so can’t even try. lol
Would you be able to help me out?

[Paulie_D]

This has nothing to do with JS as such….just add the icons as you would normally in the HTML/CSS…then it’s a matter of using JS to change them.

We’re willing to help you with code that doesn’t work…not write it for you.

If you don’t know JS then you might get lucky and find a helpful soul here to write code for you but in the real world….people get paid for that.

[jwtgray]

has nothing to do with JS

it’s a matter of using JS to

I’m confused.

If you don’t know JS then you might get lucky and find a helpful soul here to write code for you but in the real world….people get paid for that.

That’s why I started off by saying

Is it too hard to… ?

Had you not said

Very easy

and I would have moved on.

Anyway, if someone is kind enough to show me how to do it I’d really appreciate it.

[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.

[judyofthewoods]

Ah, looks like there is a limit to links in a post – for the second accordion check out scriptiny
http://www.scriptiny.com/2009/03/accordion/

[Author]

Posts