How do I keep my accordion collapsed on page load?

Question

How can I get my accordion script to be closed when the page loads? My script is this:

$('[data-fn="accordion"]').on('click',function(e) {
     var id = $(this).data('open');
 $('#'+id).slideToggle();
   if(!$(this).children('.icon-arrow').hasClass('open')) {
 $(this)
 .children('.icon-arrow')
 .addClass('open')
 .removeClass('close');
 e.preventDefault();
}
 else {
 $(this)
   .children('.icon-arrow')
   .removeClass('open')
   .addClass('close');
  e.preventDefault();
}
  });

And here is the JSFiddle

Thanks, regards Thomas

Have a look at this http://stackoverflow.com/questions/6575610/jquery-accordion-collapsed-by-default-on-page-load — Rob Schmuecker, Oct 28 '13 at 10:12
I did have a look at that, but then i have to redo all my css — maschm, Oct 28 '13 at 11:02

score 1 · Accepted Answer · answered Oct 28 '13 at 11:08

OK Have a look at the updated fiddle.

http://jsfiddle.net/NxLpq/2/

JS:

$(function () {
    $(".accordion").accordion({
        active: false,
        autoHeight: false,
        navigation: true,
        collapsible: true
    });

});

$('[data-fn="accordion"]').on('click', function (e) {
    var id = $(this).data('open');
    $('#' + id).slideToggle();
    if (!$(this).children('.icon-arrow').hasClass('open')) {
        $(this)
            .children('.icon-arrow')
            .addClass('open')
            .removeClass('close');
        e.preventDefault();
    } else {
        $(this)
            .children('.icon-arrow')
            .removeClass('open')
            .addClass('close');
        e.preventDefault();
    }
});

Thanks, that helped. Some CSS ajustment and all was working :) — maschm, Oct 28 '13 at 12:37

How do I keep my accordion collapsed on page load?

1 Answers1