How to change (-, +) symbol with a button in Bootstrap Accordion ?

04 Mar, 2022
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.  
html
<div class="card-header collapsed card-link"data-toggle="collapse"data-target="#collapseid">       Collapsible Header title   </div> <!-- convert above code to button-->  <button class="card-header collapsed card-link"data-toggle="collapse" data-target="#collapseid">       <b class="header-title float-left">    Collapsible Header title</b>    <i class="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.  
html
<!DOCTYPE html><html lang="en"> <head>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">     <link rel="stylesheet"        href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"        crossorigin="anonymous">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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">                            Accordion 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">                            Accordion 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">                            Accordion 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.  
html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta name="viewport"          content="width=device-width, initial-scale=1">     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">     <link rel="stylesheet"          href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"          integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"          crossorigin="anonymous">     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>&nbsp;&nbsp;&nbsp;&nbsp;                    <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>&nbsp;&nbsp;&nbsp;&nbsp;                    <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>&nbsp;&nbsp;&nbsp;&nbsp;                    <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 
germanshephered48
Bootstrap-Misc
jQuery-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.