Prev Page
Next Page  
Bootstrap Collapse
The ".collapse" class is used to specify the collapsible element.  Flexible plugin that utilizes a handful of classes for easy toggle behavior.
Usage
Click on the button to toggle between showing and hiding content.

.collapse hides content

.collapsing is applied during transitions

.collapse.in shows content

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Collapse</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <!-- Start Button Type Collapse -->
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Button type Collapse</button>
      <div id="demo" class="collapse">
        Lorem Ipsum is simply dummy text of the printing 
        and typesetting industry. Lorem Ipsum has been the 
        industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and 
        scrambled it to make a type specimen book. 
      </div>
       <!-- End Button Type Collapse -->
       <hr />
        <!-- Start Link Type Collapse -->
      <a href="#demo-2" class="btn btn-info" data-toggle="collapse">Link type Collapse</a>
      <div id="demo-2" class="collapse">
        Lorem Ipsum is simply dummy text of the printing 
        and typesetting industry. Lorem Ipsum has been the 
        industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and 
        scrambled it to make a type specimen book.  
      </div>
       <!-- End Link Type Collapse -->
       
</div>
 
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Link type Collapse
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapse In
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap Collapse In</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <!-- Start collapse in -->
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Click Here !</button>
      <div id="demo" class="collapse in">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
       when an unknown printer took a galley of type and scrambled it to make a 
       type specimen book.
      </div>
    <!-- End collapse in -->
       
</div>
 
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapsible list group
Click on the collapsible panel to open and close it.
<!DOCTYPE html>
<html>
<head>
   <title>Collapsible list group</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <!-- Start collapse list group -->

      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse">
            <ul class="list-group">
              <li class="list-group-item">One</li>
              <li class="list-group-item">Two</li>
              <li class="list-group-item">Three</li>
              <li class="list-group-item">Four</li>
              <li class="list-group-item">Five</li>
            </ul>
          </div>
        </div>
      </div>

    <!-- End collapse list group -->
       
</div>
 
</body>
</html>
Output :

Collapsible list group

  • One
  • Two
  • Three
  • Four
  • Five
Accordion Example
Extend the default collapse behavior to create an accordion with the panel component.
<!DOCTYPE html>
<html>
<head>
   <title>Accordion with Plus or Minus Icons</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<style type="text/css">
    .panel-title .glyphicon{
        font-size: 16px;
    }
</style>
<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.in").each(function(){
        $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
        $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
        $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>
 
<div class="container-fluid">
 
<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="#collapseOne"><span class="glyphicon glyphicon-plus"></span>
                 What is HTML?</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>Hyper Text Markup Language (HTML) was invented by 
                "Tim Berner Lee".He was a British Computer Scientist.
                 The first web page was created at CERN by Tim Berners-Lee
                  on August 6, 1991. <a href="http://www.freetimelearning.com/html/" 
                  target="_blank">Read more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span>
                 What is CSS?</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>CSS is the acronym for "Cascading Style Sheet". 
                Tutorial provides basic and advanced concepts of 
                CSS technology. Our CSS tutorial is developed for 
                beginners and professionals. <a href="http://www.freetimelearning.com/css-tutorial/" 
                target="_blank">Read more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                <span class="glyphicon glyphicon-plus"></span> What is Javascript?</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>JavaScript is the programming language of the Web. 
            Javascript Most commonly used websites this is client-side script to interact 
            with the user and make dynamic pages. All modern web browsers on desktops, 
            tablets, and smart phones are using JavaScript. 
            <a href="http://www.freetimelearning.com/javascript/" target="_blank">
            Read more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                <span class="glyphicon glyphicon-plus"></span> What is Bootstrap?</a>
            </h4>
        </div>
        <div id="collapseFour" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Bootstrap is the most popular HTML, CSS and JavaScript 
                framework for developing responsive, mobile-first web sites. 
                Bootstrap is faster and easier web development.
                <a href="http://www.freetimelearning.com/bootstrap/" 
                target="_blank">Read more.</a></p>
            </div>
        </div>
    </div>
    
</div>
</div>
       
</div>
 
</body>
</html>
Output :

What is HTML?

Hyper Text Markup Language (HTML) was invented by "Tim Berner Lee".He was a British Computer Scientist. The first web page was created at CERN by Tim Berners-Lee on August 6, 1991. Read more.

What is CSS?

CSS is the acronym for "Cascading Style Sheet". Tutorial provides basic and advanced concepts of CSS technology. Our CSS tutorial is developed for beginners and professionals. Read more.

What is Javascript?

JavaScript is the programming language of the Web. Javascript Most commonly used websites this is client-side script to interact with the user and make dynamic pages. All modern web browsers on desktops, tablets, and smart phones are using JavaScript. Read more.

What is Bootstrap?

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is faster and easier web development.Read more.

Options
There are certain options which can be passed via data attributes or JavaScript are listed in the following table
Name type default description
parent selector false If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class)
toggle boolean true Toggles the collapsible element on invocation
Methods
Here is a list of some useful methods that are used with collapsible elements.
Method Description Example

.collapse(options)

 Activates your content as a collapsible element. Accepts an optional options object.
$('#identifier').collapse({ toggle: false })

.collapse('toggle')

 Toggles a collapsible element to shown or hidden.
$('#identifier').collapse('toggle')

.collapse('show')

 Shows a collapsible element.
$('#identifier').collapse('show')

.collapse('hide')

 Hides a collapsible element.
$('#identifier').collapse('hide')
Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Event Type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
  Prev Page
Next Page