CODEWITHSUNDEEP
jqueryaccordion
maschm
maschm

Reputation: 27

How do I keep my accordion collapsed on page load?

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

Upvotes: 0

Views: 851

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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();
    }
});

Upvotes: 1

Related Questions