JS Accordion 不会折叠所有选项卡

Question

Okay so I have this accordion on a page I'm making and here is the code for it:

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        <h4 class="mb16">Frequently Asked Questions</h4>
        <p class="lead mb64"> Holla @twitterhandle if you've got more questions and we'll do our best to answer. </p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <ul class="accordion accordion-2 one-open">
          <li>
            <div class="title">
              <h4 class="inline-block mb0">How can X increase productivity?</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
          </li>
          <li>
            <div class="title">
              <h4 class="inline-block mb0">Does X do X?</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
          </li>
          <li>
            <div class="title">
              <h4 class="inline-block mb0">Will my staff need to take a course on how to operate the application?</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
          </li>
          <li>
            <div class="title">
              <h4 class="inline-block mb0">What does X offer?&nbsp;</h4>
            </div>
            <div class="content">
              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

The JS for the accordion is:

$('.accordion li').click(function() {
    if ($(this).closest('.accordion').hasClass('one-open')) {
        $(this).closest('.accordion').find('li').removeClass('active');
        $(this).addClass('active');
    } else {
        $(this).toggleClass('active');
    }
});

All the tabs are closed when I reload the page. However, after expanding one of them, I can't close them all again. One of them remains open. Any help would be appreciated.

Answer 1

Don't close by code. Set collapsible property true if you want to close all tabs. This is sample code.

<script>
    $(function () {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>