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.
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>
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.
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>
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.