Bootstrap Tutorial - Bootstrap Collapse

Bootstrap allows us to expand and collapse elements without using the accordion markup and JavaScript code.

Expanding and Collapsing via Data Attributes

Add data-toggle="collapse" to the controller element such as a button or an anchor along with a data-target for buttons or href for anchors to automatically assign control of a collapsible element.

The data-target or href attribute accepts a CSS selector to apply the collapse to a specific element.

Add the class "collapse" to the collapsible element. If you'd like it to default open, add the additional class "in".

<!--   www .j  a  va 2 s  . c o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
p{
    background: #F9F9F9;
    border: 1px solid #E1E1E8;
    margin: 10px 0;
    padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Toggle Button">
    <!-- Collapsible Element HTML -->
    <div id="toggleDemo" class="collapse in"><p>This is a simple example of expanding and collapsing individual element via data attribute. Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>

Click to view the demo

Expanding and Collapsing Elements via JavaScript

We may expand and collapse an individual element manually via JavaScript, call the collapse() method with the "id" or "class" selector of the collapsible element in your JavaScript code.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--  w w  w .  j ava 2  s  .c om-->
    $(".btn").click(function(){
        $("#toggleDemo").collapse('toggle');
    });
});
</script>
<style type="text/css">
p{
    background: #F9F9F9;
    border: 1px solid #E1E1E8;
    margin: 10px 0;
    padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" value="Toggle Button">
    <!-- Collapsible Element HTML -->
    <div id="toggleDemo" class="collapse in"><p>
    this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. 
    this is a test. this is a test. this is a test. 
    Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>

Click to view the demo

Options

The following options can be used with collapse.

Name	Type	Default Value	Description
parent	selector	false	Set collapsible parent.
toggle	boolean	true	Toggles the collapsible element on invocation.

Methods for collapse

<!--  w  ww .j a v  a  2 s . c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".toggle-false").click(function(){
        $("#myCollapsible").collapse({
            toggle: false
        });
    });
    $(".show-btn").click(function(){
        $("#myCollapsible").collapse('show');
    });
    $(".hide-btn").click(function(){
        $("#myCollapsible").collapse('hide');
    });
    $(".toggle-btn").click(function(){
        $("#myCollapsible").collapse('toggle');
    });
});
</script>
<style type="text/css">
p {
    background: #F9F9F9;
    border: 1px solid #E1E1E8;
    margin: 10px 0;
    padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary toggle-false" value="Toggle False">
    <input type="button" class="btn btn-primary show-btn" value="Show Button">
    <input type="button" class="btn btn-primary hide-btn" value="Hide Button">
    <input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">
      
    
    <!-- Collapsible Element HTML -->
    <div id="myCollapsible">
        <p>Click on the buttons to see how it works.</p>
    </div>
</div>
</body>
</html>

Click to view the demo

Events

We can use the following events with collapse.

Event	Description
show.bs.collapse	fires immediately when the show instance method is called.
shown.bs.collapse	fired when a collapse element has been made visible to the user after animation.
hide.bs.collapse	fired immediately when the hide method has been called.
hidden.bs.collapse	fired when a collapse element has been hidden from the user after animation.

The following example displays a log message when sliding transition of a collapsible element has been fully completed.

<!--   ww w.  j  a  va2  s  .  c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#myCollapsible').on('hidden.bs.collapse', function(){
    console.log('Collapsible element has been completely closed.');
  });
});
</script>
<style type="text/css">
p {
  background: #F9F9F9;
  border: 1px solid #E1E1E8;
  margin: 10px 0;
  padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse in"><p>This is a simple example of hidden event. </p></div>
</div>
</body>
</html>

Click to view the demo