为什么手风琴折叠“全部打开/全部关闭”选项不起作用？

Question

Please see the snippet below. All collapsible items are opened by default. When I click Close All , they all close. When I click Open All , only the top one opens. If I continue to click Open All , it simply toggles the first and second collapsible elements.

I think I have the script set up to collapse if showing, and show if hiding.

What am I missing here?

 $('.closeall').click(function(){ $('.accordion-collapse.show') .collapse('hide'); }); $('.openall').click(function(){ $('.accordion-collapse:not(".show")') .collapse('show'); }); 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script> <section class="page-section" id=""> <div class="container"> <div class="wow fadeIn"> <h2 class="text-center">Speaker Content</h2> <div class="row"> <div class="col-sm-12"> <a href="#" class="btn btn-default openall">open all</a> <a href="#" class="btn btn-default closeall">close all</a> </div> </div> <div class="accordion" id="accordionExample"> <div class="card no-border"> <div class="card-header no-bg" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#confReg" aria-expanded="true" aria-controls="confReg"> Conference Registration </button> </h5> </div> <div id="confReg" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body bg-ism-grey"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card no-border"> <div class="card-header no-bg" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#bioHead" aria-expanded="false" aria-controls="bioHead"> Biography &amp; Headshot </button> </h5> </div> <div id="bioHead" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body bg-ism-grey"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card no-border"> <div class="card-header no-bg" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#hotelRes" aria-expanded="false" aria-controls="hotelRes"> Hotel Reservations </button> </h5> </div> <div id="hotelRes" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body bg-ism-grey"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card no-border"> <div class="card-header no-bg" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#speakReimPol" aria-expanded="false" aria-controls="speakReimPol"> Speaker Reimbursement Policy </button> </h5> </div> <div id="speakReimPol" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body bg-ism-grey"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card no-border"> <div class="card-header no-bg" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#ppPres" aria-expanded="false" aria-controls="ppPres"> PowerPoint Presentation </button> </h5> </div> <div id="ppPres" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body bg-ism-grey"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div> </div> </div> </section> 

Answer 1

This was one hell of a confusing problem.

But it won't work. The way that BS (what I like to call Bootstrap) handles accordions only allows one to be open at a time. So when you open one, all of the others close.

I was unable to figure out a way to do this within BS's framework; you can try to figure out a way around this yourself. If I find a way to do it, I'll update this answer.

Bootstrap Accordion Docs: https://getbootstrap.com/docs/4.1/components/collapse/#options