Creating Bootstrap Collapsible Accordion Widget with Example

Posted 7 years ago By Ajay Gupta 64554

Collapsibles are useful when you need to show and hide large amount of data and You don't need to use JavaScript code to create accordion or a simple collapsible panel.

You can easily use Bootstrap collapse feature to expanding and collapsing large data.

You need two elements to work on this features: first one is controller like button or hyperlink through which you can collapse the other element and second is collapsible element itself.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Creating Bootstrap Collapsible Accordion Widget </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion"> <!-- accordion 1 -->
   <div class="panel panel-primary">
        <div class="panel-heading"> <!-- panel-heading -->
            <h4 class="panel-title"> <!-- title 1 -->
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
            1. What is HTML ?
            </a>
           </h4>
        </div>
        <!-- panel body -->
        <div id="accordionOne" class="panel-collapse collapse in">
          <div class="panel-body">
           HTML is used for web designing, ever you think how web browser display web pages for you. <a href="http://www.expertphp.in/article/what-is-html-and-why-html-is-important" target="_blank">Learn more.</a>
          </div>
        </div>
  </div>
   <div class="panel panel-success">  <!-- accordion 2 -->
          <div class="panel-heading"> 
          <h4 class="panel-title"> <!-- title 2 -->
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
              2. What is PHP ?
            </a>
          </h4>
          </div>
         <!-- panel body -->
        <div id="accordionTwo" class="panel-collapse collapse">
          <div class="panel-body">
            You are allowed to build dynamic websites with the help of PHP. You can run PHP on any platform whether it is UNIX, Linux and windows.<a href="http://www.expertphp.in/article/what-is-php-language" target="_blank">Learn more.</a>
          </div>
        </div>   
   </div>
    <div class="panel panel-warning">  <!-- accordion 3 -->
        <div class="panel-heading">
          <h4 class="panel-title"> <!-- title 3 -->
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
             3. What is CSS ?
            </a>
          </h4>
        </div>  
        <div id="accordionThree" class="panel-collapse collapse">
          <!-- panel body -->
          <div class="panel-body">
          CSS stands for ‘Cascading Style Sheets’ and it is an extension to basic HTML that allows you to style your web pages. <a href="http://www.expertphp.in/article/introduction-to-cascading-style-sheets" target="_blank">Learn more.</a>
        </div>      
     </div>
 </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Creating Bootstrap Collapsible Accordion Widget </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion"> <!-- accordion 1 -->
   <div class="panel panel-primary">
        <div class="panel-heading"> <!-- panel-heading -->
            <h4 class="panel-title"> <!-- title 1 -->
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">
            1. What is HTML ?
            </a>
           </h4>
        </div>
        <!-- panel body -->
        <div id="accordionOne" class="panel-collapse collapse in">
          <div class="panel-body">
           HTML is used for web designing, ever you think how web browser display web pages for you. <a href="http://www.expertphp.in/article/what-is-html-and-why-html-is-important" target="_blank">Learn more.</a>
          </div>
        </div>
  </div>
   <div class="panel panel-success">  <!-- accordion 2 -->
          <div class="panel-heading"> 
          <h4 class="panel-title"> <!-- title 2 -->
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">
              2. What is PHP ?
            </a>
          </h4>
          </div>
         <!-- panel body -->
        <div id="accordionTwo" class="panel-collapse collapse">
          <div class="panel-body">
            You are allowed to build dynamic websites with the help of PHP. You can run PHP on any platform whether it is UNIX, Linux and windows.<a href="http://www.expertphp.in/article/what-is-php-language" target="_blank">Learn more.</a>
          </div>
        </div>   
   </div>
    <div class="panel panel-warning">  <!-- accordion 3 -->
        <div class="panel-heading">
          <h4 class="panel-title"> <!-- title 3 -->
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">
             3. What is CSS ?
            </a>
          </h4>
        </div>  
        <div id="accordionThree" class="panel-collapse collapse">
          <!-- panel body -->
          <div class="panel-body">
          CSS stands for ‘Cascading Style Sheets’ and it is an extension to basic HTML that allows you to style your web pages. <a href="http://www.expertphp.in/article/introduction-to-cascading-style-sheets" target="_blank">Learn more.</a>
        </div>      
     </div>
 </div>
</body>
</html>

Output of above code :

Expanding and Collapsing Elements using Data Attributes

You can use the Bootstrap collapse feature to expanding and collapsing large amount of data by using data attributes.

<div class="expertphpDemo">
  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-info" 
  data-toggle="collapse" data-target="#toggle-example">Click to Toogle</button>
  
    <div id="toggle-example" class="collapse in"> 
      <p>ExpertPHP.in is a leading development portal of India. We have excellent development courses with greate developer tips and tricks for specially PHP, MySQL,HTML</p>
    </div>
</div>

<div class="expertphpDemo">
  <!-- Toogle Buttons -->
    <button type="button" class="btn btn-info" 
  data-toggle="collapse" data-target="#toggle-example">Click to Toogle</button>
  
    <div id="toggle-example" class="collapse in"> 
      <p>ExpertPHP.in is a leading development portal of India. We have excellent development courses with greate developer tips and tricks for specially PHP, MySQL,HTML</p>
	</div>
</div>

Explanation of Above Example

Attribute data-toggle="collapse" is used to control the collapsible content such as show and hide content.
Attribute data-target="#id" is used to connect the controller like button with the collapsible content.
Class .collapse indicates a collapsible element which means class .collapse tells that this is the content that will be show and hide by clicking a button.

Note : You will use the href attribute instead of the data-target attribute for anchor tag.

Expanding and Collapsing Elements using JavaScript

Features of expanding and collapsing any individual element can be achieved by manually by using JavaScript collapse() method.

<input type="button" class="btn" value="Click to Toggle">
<div id="toggle-example" class="collapse"><p>This is a basic example of expanding and collapsing individual element by using JavaScript.</p></div>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggle-example").collapse('toggle');
    });
});
</script>

<input type="button" class="btn" value="Click to Toggle">

<div id="toggle-example" class="collapse"><p>This is a basic example of expanding and collapsing individual element by using JavaScript.</p></div>

<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(){
        $("#toggle-example").collapse('toggle');
    });
});
</script>

if you want to show content only by using collapse() method then pass parameter 'show' in collapse method and if you want to hide content only then same as pass 'hide' parameter to collapse method.

.collapse('show') to show a collapsible element.
.collapse('hide') to hides a collapsible element.

Show Demo

Creating Bootstrap Collapsible Accordion Widget with Example