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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    

    • 



Syntax:


$(selector).toggleClass('fas fa-plus fas fa-minus');


Example 1:Below example illustrate how to change symbol on button accordion using jQuery.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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"> 


                            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> 



















                        chevron_right







                        filter_none








Output:




Example 2: Below example illustrate how to change symbol on collapsible button using jQuery.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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>     


                    <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> 



















                        chevron_right







                        filter_none








Output:




Reference:  https://api.jquery.com/toggleClass/#toggleClass-className



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
VigneshKannan3
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.