Bootstrap's accordion component is a very handy JS component, but when used, it may cause some inconvenience, such as expanding multiple headings at the same time.
The official website gives the following code:
<divclass="Panel-group"Id="Accordion"role="Tablist"aria-multiselectable="True"><divclass="Panel Panel-default"><divclass="Panel-heading"role="Tab"Id="Headingone">class="Panel-title"><arole="Button"data-toggle="Collapse"Data-parent="#accordion"href="#collapseOne"Aria-expanded="True"aria-controls="Collapseone"> Collapsible Group Item #1</a></div><divId="Collapseone"class="Panel-collapse collapse in"role="TabPanel"aria-labelledby="Headingone"><divclass="Panel-body"> 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 Accusamu S Labore sustainable VHS.</div></div></div><divclass="Panel Panel-default"><divclass="Panel-heading"role="Tab"Id="Headingtwo">class="Panel-title"><aclass="Collapsed"role="Button"data-toggle="Collapse"Data-parent="#accordion"href="#collapseTwo"Aria-expanded="False"aria-controls="Collapsetwo"> Collapsible Group Item #2</a></div><divId="Collapsetwo"class="Panel-collapse collapse"role="TabPanel"aria-labelledby="Headingtwo"><divclass="Panel-body"> 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 Accusamu S Labore sustainable VHS.</div></div></div><divclass="Panel Panel-default"><divclass="Panel-heading"role="Tab"Id="Headingthree">class="Panel-title"><aclass="Collapsed"role="Button"data-toggle="Collapse"Data-parent="#accordion"href="#collapseThree"Aria-expanded="False"aria-controls="Collapsethree"> Collapsible Group Item #3</a></div><divId="Collapsethree"class="Panel-collapse collapse"role="TabPanel"aria-labelledby="Headingthree"> <div class="Panel-body"> 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 Accusamu S Labore sustainable VHS. </div> </div> </div></div>
at this point, if you need to expand multiple headings, you need to
< Span class= "NA" > < Span class= "NA" > < Span class= "s" >data-parent= "#accordion" removed, This will prevent you from turning off the title when you open it.
isn't it convenient to try it?
BootStrap Accordion Accordion components can be expanded all the way