0

I am using JQuery Accordian, I want to hide all the sections on page load. Only when user clicks on header that section should open. Can any one help me out..

$(document).ready(function() {

$('.accordion-header').toggleClass('inactive-header');

var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


$('.accordion-header').click(function () {
    if($(this).is('.inactive-header')) {
        $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }

    else {
        $(this).toggleClass('active-header').toggleClass('inactive-header');
        $(this).next().slideToggle().toggleClass('open-content');
    }
});

return false;

});

HElp.. Thanks

ECo RamOs Javier
  • 7
  • 1
  • 3
  • Duplicate to this [Google Hurts???] [Check it first][1] [1]: http://stackoverflow.com/questions/6575610/jquery-accordion-collapsed-by-default-on-page-load – Abdullah Ahmed Jan 20 '14 at 09:10

2 Answers2

0

  Add this to your jQuery
  **jQuery('.panel-collapse').removeClass("in");**
  This will close the accordion on page load
  
`<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
    <div class="panel-body">   
      <div class="textwidget">
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </div>
</div>
Yonko Kilasi
  • 337
  • 3
  • 9
-1

Try to use .collapse('hide') method:

$(document).ready(function() {
     $('#yourAccordionId').collapse("hide");

     // Rest of the code here

});
Felix
  • 37,892
  • 8
  • 43
  • 55