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

Contents

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


 
    
 
        
            
                
                    
                        
                        Product Group Item #1
                    
                
            
            
                
                     
                
            
        
 
        
            
                
                    
                        
                        Product Group Item #2

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


  First Accordian Head+
  
    First Accordian Body, it will have description
  
  Second Accordian Head+
  
    Second Accordian Body, it will have description
  
  Third Accordian Head+
  
    Third Accordian Body, it will have description
  



  First Accordian Head+
  
    First Accordian Body, it will have description
  
  Second Accordian Head+
  
    Second Accordian Body, it will have description
  
  Third Accordian Head+
  
    Third Accordian Body, it will have description

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 :

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.