BOOTSTRAP ACCORDION WITH PLUS MINUS ICON

Today, We want to share with you BOOTSTRAP ACCORDION WITH PLUS MINUS ICON EXAMPLES.In this post we will show you Simple Bootstrap accordion collapse anim id with toggle button accordian, hear for Bootstrap expand / collapse with plus and minus we will give you bootstrap dropdown demo using get element by class and javascript toggle example for implement.In this post, we will learn about add plus minus symbol to a bootstrap accordion with html target attribute an example.

BOOTSTRAP ACCORDION WITH PLUS MINUS ICON EXAMPLES

There are the Following The simple About BOOTSTRAP ACCORDION WITH PLUS MINUS ICON EXAMPLES Full Information With Example and source code.

As I will cover this Post with live Working example to develop bootstrap 4 accordion with plus minus icon, so the add plus minus symbol to a bootstrap data-toggle panel accordion for this example is following below solution for bootstrap collapse not working.

Example 1: Bootstrap expand / collapse with plus and minus

Step 1 : HTML Part with accordion table

<div class="container ">
 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="groupOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="plus-minus glyphicon glyphicon-plus"></i>
                        Product Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="groupOne">
                <div class="panel-body">
                     
                </div>
            </div>
        </div>
 
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="plus-minus glyphicon glyphicon-plus"></i>
                        Product Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                     
                </div>
            </div>
        </div>
 
    </div><!-- panel-group -->
      
</div><!-- container -->

Step 2 : javascript Part with accordion folders target

$(function() {
  function toggleIcon(e) {
      $(e.target)
          .prev('.panel-heading')
          .find(".plus-minus")
          .toggleClass('glyphicon-plus glyphicon-minus');
  }
  $('.panel-group').on('hidden.bs.collapse', toggleIcon);
  $('.panel-group').on('shown.bs.collapse', toggleIcon);
 
});

Full Example of the Expand Collapse Div Plus Minus Using jQuery

Example 2: jQuery Accordion with Plus and Minus Toggle

Step 1: HTML Part demo with expand collapse icons

<div class="accordion_container">
  <div class="accordion_head">First Accordian Head<span class="plusminus">+</span></div>
  <div class="accordion_body" style="display: none;">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head">Second Accordian Head<span class="plusminus">+</span></div>
  <div class="accordion_body" style="display: none;">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head">Third Accordian Head<span class="plusminus">+</span></div>
  <div class="accordion_body" style="display: none;">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>

<div class="accordion_container">
  <div class="accordion_head">First Accordian Head<span class="plusminus">+</span></div>
  <div class="accordion_body" style="display: none;">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head">Second Accordian Head<span class="plusminus">+</span></div>
  <div class="accordion_body" style="display: none;">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head">Third Accordian Head<span class="plusminus">+</span></div>
  <div class="accordion_body" style="display: none;">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>

Step 2: jQuery Part & collapse icon with accordion card

$(document).ready(function() {
  //toggle the component with class accordion_body
  $(".accordion_head").click(function() {
    if ($('.accordion_body').is(':visible')) {
      $(".accordion_body").slideUp(300);
      $(".plusminus").text('+');
    }
    if ($(this).next(".accordion_body").is(':visible')) {
      $(this).next(".accordion_body").slideUp(300);
      $(this).children(".plusminus").text('+');
    } else {
      $(this).next(".accordion_body").slideDown(300);
      $(this).children(".plusminus").text('-');
    }
  });
});

Step 3: CSS Part

.accordion_container {
  width: 500px;
}

.accordion_head {
  background-color: skyblue;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plusminus {
  float: right;
}

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about BOOTSTRAP ACCORDION WITH PLUS MINUS ICON EXAMPLES.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.