O'Reilly logo

Bootstrap Essentials by Snig Bhaumik

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Collapse and accordions

Bootstrap collapse component is used to simply show and hide different sections and subsections of your web page. This is useful when you don't want the sections to be visible initially, but will toggle when clicked on a button or hyperlink. Here is a simple example:

Collapse and accordions

Here is the HTML code for the preceding screenshot:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#theSection" id="theButton">Open this</button>
<div class="collapse" id="theSection">
  <div class="well">
    this content is coming from the collapsible section.
  </div>
</div>

The JavaScript code for the preceding screenshot is:

// When ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required