Here i have explained how to create Expand Collapse Control with Bootstrap.

Step1: copy the following HTML Markup and paste it inside body tag.

HTML Markup

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
  <a class="accordion-toggle btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  <span class="glyphicon glyphicon-plus"></span>
  Expand / Collapse
  </a>
  </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse">  
  <div class="panel-body">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   </p> </div>
  </div>
  </div>  
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
  <a class="accordion-toggle btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
  <span class="glyphicon glyphicon-plus"></span>
  Expand / Collapse2
  </a>
  </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
      <p>      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
      </p>
  </div>
  </div>
  </div> 
  </div>

Step2: attach the following CSS and JavaScript files.

CSS - JavaScript

<!--CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<!--JavaScript-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Step3: copy the following Javascript function and paste it inside head tag to toogle Plus and Minus icons

Javascript

  $('.collapse').on('shown.bs.collapse', function(){
  $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
  }).on('hidden.bs.collapse', function(){
  $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
  });

Screenshot

Add Comments