How to change (-, +) symbol with a button in Bootstrap Accordion ?
In Bootstrap 4, there is no default option for changing (-, +) symbol with a button accordion. Hence it can be done by using jQuery. The Following Approach will explain clearly.
Approach:
- Font awesome or any icon utilities to display (-, +) symbol:
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integrity=”sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anonymous”>
- Convert div tag with class=”card-header” into a button as follows: You can use data-target and data-toggle attributes on any button to make button accordion. Finally, use jQuery toggleClass() method to change (-, +) symbol with a button Bootstrap Accordion In fontawesome, class=”fas fa-plus” for plus symbol and class=”fas fa-minus” for plus symbol.
<divclass="card-header collapsed card-link"data-toggle="collapse"data-target="#collapseid">Collapsible Header title</div><!-- convert above code to button--><buttonclass="card-header collapsed card-link"data-toggle="collapse"data-target="#collapseid"><bclass="header-title float-left">Collapsible Header title</b><iclass="fas fa-plus float-right "></i></button>
Syntax:
$(selector).toggleClass('fas fa-plus fas fa-minus');Example 1:Below example illustrate how to change symbol on button accordion using jQuery.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <link rel="stylesheet" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <script src= </script> <script src= </script> <script src= </script> <style> button:focus { outline-color: black; } </style></head> <body> <center> <div class="container"> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </h1> <br> <div id="accordion"> <div class="card"> <button class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseOne"> <b class="header-title float-left"> Accordian Menu Item #1 </b> <i class="fas fa-plus float-right "></i> </button> <div id="collapseOne" class="collapse" data-parent="#accordion"> <div class="card-body"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </div> </div> </div> <div class="card"> <button class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseTwo"> <b class="header-title float-left"> Accordian Menu Item #2</b> <i class="fas fa-plus float-right "></i> </button> <div id="collapseTwo" class="collapse" data-parent="#accordion"> <div class="card-body"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </div> </div> </div> <div class="card"> <button class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseThree"> <b class="header-title float-left"> Accordian Menu Item #3 </b> <i class="fas fa-plus float-right "></i> </button> <div id="collapseThree" class="collapse" data-parent="#accordion"> <div class="card-body"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </div> </div> </div> </div> </div> </center> <script> $('.card-header').click(function() { $(this).find('i').toggleClass('fas fa-plus fas fa-minus'); }); </script> </body> </html> |
Output:
Example 2: Below example illustrate how to change symbol on collapsible button using jQuery.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <link rel="stylesheet" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <script src=" </script> <script src=" </script> <script src= </script></head> <body> <center> <div class="container"> <h1 style="color:green;padding:13px;"> GeeksforGeeeks </h1> <br> <div id="accordion btn-group"> <button type="button" class="card-btn btn btn-info" data-toggle="collapse" data-target="#collapseOne"> <b class="header-title float-left"> Menu#1</b> <i class="fas fa-plus float-right "></i> </button> <button type="button" class="card-btn btn btn-warning" data-toggle="collapse" data-target="#collapseTwo"> <b class="header-title float-left"> Menu#2</b> <i class="fas fa-plus float-right "></i> </button> <button type="button" class="card-btn btn btn-danger" data-toggle="collapse" data-target="#collapseThree"> <b class="header-title float-left"> Menu#3</b> <i class="fas fa-plus float-right "></i> </button> <div id="collapseOne" class="collapse"> <div class="card-body"> <b>Menu#1</b> <br/> <p class="text-info"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div> </div> <div id="collapseTwo" class="collapse"> <div class="card-body"> <b>Menu#2</b> <br/> <p class="text-warning "> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div> </div> <div id="collapseThree" class="collapse"> <div class="card-body"> <b>Menu#3</b> <br/> <p class="text-danger"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </div> </div> </div> </div> </center> <script> $('.card-btn').click(function() { $(this).find('i').toggleClass('fas fa-plus fas fa-minus') }); </script></body> </html> |
Output:
Reference: https://api.jquery.com/toggleClass/#toggleClass-className
