BootStrap Accordion Accordion components can be expanded all the way

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.