David Martins David Martins - 1 month ago 7
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
$(this).toggleClass("open").next().slideToggle('fast');
//Hide the other panels
$(".accordion-toggle").not($(this)).removeClass("open");
$(".accordion-content").not($(this).next()).slideUp('fast');
});

Answer

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