David Martins David Martins - 11 months ago 40
Javascript Question

How to make this accordion load with all menus closed?

This is what I'm using: JsFiddle

I'd like to have all menus closed by default.

Thanks in advance!

PS: I know nothing of JavaScript so it would help if you illustrate your answer using the fiddle.

$('.info').find('.accordion-toggle').click(function () {
//Expand or collapse this panel
//Hide the other panels

Answer Source

See the updated JsFiddle

<div class='info'>
     <h1 class='accordion-toggle (remove this class ->)open'>Header 1 </h1>

    <div class='accordion-content (remove this class ->)default'>Content 1...</div>
     <h1 class='accordion-toggle'>Header 2 </h1>

    <div class='accordion-content'>Content 2...</div>
     <h1 class='accordion-toggle'>Header 3 </h1>

    <div class='accordion-content'>Content 3...</div>

There is no JS change needed just need to remove the open class in first H1 tag and default class form the div under it.