Bootstrap Collapsible

In the last article we saw how bootstrap dropdown menus can classify the content while saving space. This article explains another bootstrap element having same function. Bootstrap collapsible element allow users to click a button or a link to show or hide certain section on a webpage. There are two elements needed to create bootstrap collapsible element. One is the controller which is a button or a link and the other is a section which is shown or hidden on button click. Follow these steps to create bootstrap collapsible.

Create a controller i.e. button or a link and add data-toggle=”collapse” attribute to it. Also add target attribute and assign it the id of the element which should be shown or hidden with button click.
Create a div with id equals the id set in the target attribute of the button created in step 1. Add “collapse” class to this div.

Take a look at the following example to see bootstrap collapsible in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <h1>Collapsible</h1>
         <button data-toggle="collapse" data-target="#panel">Collapse Panel</button>
          <div class="panel panel-default collapse" id="panel">
            <div class="panel-body">This is a default panel</div>
        </div>


    </body>

</html>

Download the code Try the code

If you run the above page, you should see a button. Clicking the button should open a panel. Clicking it again should hide it. Notice that the button has an attribute target with value “panel”. Also, if you look at the panel it has id of “panel”. This bounds button with the panel.

Collapsible Div

Apart from panels, you can collapse virtually any html element. In the next example, we shall see how a circular div can be made collapsible using bootstrap. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    
    <style>
        div{
            width: 300px;
            height: 300px;
            border-radius: 100%;
            background-color: bisque;
        }
    
    </style>

    <body> 
        <h1>Collapsible</h1>
         <button data-toggle="collapse" data-target="#panel">Collapse Circle</button>
          <div class="collapse" id="panel">
            
        </div>


    </body>

</html>

Download the code Try the code

Open the above page in browser. You should see a button. Click the button. It should show a light orange circle. Clicking the button again should hide the circle. This circle is basically a div styled as a circle. This shows that bootstrap collapsible can be used to make any element collapsible.

<<< Bootstrap DropdownBootstrap Tabs >>>