Skip to content
Related Articles

Related Articles

Bootstrap Collapse Plugin
  • Difficulty Level : Medium
  • Last Updated : 31 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link rel="stylesheet" href=
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :