Bootstrap Collapse Plugin

Last Updated : 24 Jul, 2024

Bootstrap Collapse plugin helps to collapse the web page content and toggle its visibility across the application. The plugin helps to divide the page content and makes it easy to collapse and also supports many content options like an accordion.

Approach:

Bootstrap offers some JavaScript functions as an attribute and the collapse JavaScript plugin comes with an attribute named data-*.

To toggle any data:

The data-toggle attribute is set to collapse in your toggle button.
The data-target is set to the class or id of a div you want to toggle.
Set the div class to data-toggle=collapse which you want to toggle so that the data is not visible initially.

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" 
content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>

  <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
</head>

<body>
  <div class="container">
    <h2>Bootstrap collapse plugin</h2>
    <button class="btn" 
            data-toggle="collapse"
            data-target="#disappear">
      Collapsible
    </button>

    <div id="disappear" class="collapse">
      This is a disappearing message
    </div>
  </div>
</body>

</html>

Output:

Example 2: In an accordion, you might need another attribute named data-parent which ensures that all the collapsible elements under the given parent are closed if one of the items is shown. For such cases set the data-parent attribute to the id or class of the container div.

HTML

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
</head>

<body>

  <div class="container">
    <h2>Bootstrap collapse plugin</h2>
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
              Collapsible Number 1
            </a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">
            This is the message of collapse1.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
              Collapsible Number 2
            </a>
          </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body">
            This is the message of collapse2.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
              Collapsible Number 3
            </a>
          </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body">
            This is the message of collapse3.
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Output:

Supported Browser:

Google Chrome
Microsoft Edge
Firefox
Opera
Safari

Bootstrap Collapse Plugin

1829022

Improve

Article Tags :

Bootstrap Collapse Plugin

Approach:

Similar Reads

Thank You!

What kind of Experience do you want to share?