Super simple jQuery accordion, help needed

[tuleby]

Hi!

My knowledge of Javascript extends only to “cut& paste-coding” with existing jQuery examples etc. :)

I can not get this simple accordion to work as I want. When clicking any H3 to expand the corresponding div with text, ALL of them are opened. I would of course only want them to open one at a time.

See codepen:
http://codepen.io/tuleby/pen/ijqHL

Any simplifications that could be done to CSS and or jQuery would also be appreciated.

Thanks in advance.

[Paulie_D]

My JQuery is poor but I have this (so far)

http://codepen.io/Paulie-D/pen/pkzse

I’m still working on having the active div hide when clicked again..

[Paulie_D]

Cracked it

http://codepen.io/Paulie-D/pen/pkzse

As I said. my JQ is pretty much cut and paste so perhaps this could all be tightened up…but it seems to work.

That was fun…I learned something.

[tuleby]

Great! Thank you very much for this Paulie_D :)

[Chromawoods]

@Paulie_D it does not quite work as expected? If you expand one item and then click another one, that item does not expand. I made a fork of your fork and made a few modifications:
http://codepen.io/chromawoods/pen/vEscu

When we click an item, we must reference it with jQuery’s $(this). Also cached some selectors and utilized chaining for performance.

[Paulie_D]

Odd…it was working when I posted but OK.

[Author]

Posts