How to open only 1 accordion at one time

Question

$('.accordion').on('click', '.accordion-control', function(e){
    e.preventDefault();
    $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
});

<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

My accordion is working just fine. But i want it to be like the user can only open one accordion at once. When one accordion is open the user cannot open another accordion. This is simple jQuery, no other libraries or frameworks are used. I have also included some part of my HTML file you can have a look.

Answer 1

Just close all of them and open the one that the user click on:

 $('.accordion-control').click(function(){ $(".accordion-panel").slideUp(); $(this).next('.accordion-panel').slideToggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="accordion"> <li> <button class="accordion-control">Something</button> <div class="accordion-panel"> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </li> <li> <button class="accordion-control">Something</button> <div class="accordion-panel"> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </li> </ul>

This SO relate: JS slideToggle close other open divs

Answer 2

I rewrote your sample input with prescribed jQuery UI markup, as documented here: https://api.jqueryui.com/accordion/#entry-examples

Your sample code in your question doesn't match correct markup very closely.

As you can see in the working example below, only one panel is open at any given time, which is what you reported as the desired behavior. As mentioned in my comment above, that is also the default behavior.

Run snippet below to see a working version in action.

 $("#accordion").accordion();

 <link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="accordion"> <h3>Something 1</h3> <div> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <h3>Something 2</h3> <div> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>

Answer 3

You need to close the open panel.

 $('.accordion').on('click', '.accordion-control', function(e) { e.preventDefault(); //Close Open panel $(this).closest(".accordion").find(".accordion-panel:visible").slideToggle(); $(this) .next('.accordion-panel') .not(':animated') .slideToggle(); });

 .accordion-panel { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="accordion"> <li> <button class="accordion-control">Something</button> <div class="accordion-panel"> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </li> <li> <button class="accordion-control">Something</button> <div class="accordion-panel"> <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </li> </ul>

Answer 4

probably what you could do is disable all of your accordions and everytime the user clicks on one of them enable the next one.

You can see an example here hope that will solve your problem.

I also have provided a code snippet to help you with the previous example.

 // Disable #x $('.accordion').on('click', function(e){ e.preventDefault(); $(this) .next('.accordion-panel') .not(':animated') .slideToggle(); $( "#x" ).prop( "disabled", false ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="x" class="form-control" disabled> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button class="accordion">click me</button>

What you are trying to achieve is also possible with the framework bootstrap in an easy way that you can see by clicking here . Bootstrap also uses jquery so if you need to costumize anything it's possible too. To download it you can click here . Please note, in order to bootstrap code work you need to download it and write the right path on the head of your html or add this scripts:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>