Open In App

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

Last Updated : 04 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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
 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to hide text-overflown as ellipsis using dynamic bootstrap cols ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to reload page after specific seconds in jQuery ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to automatically close all collapsible elements inside of the accordion when closing the accordion?
            

        
    
        
            

                How to create Nested Accordion using Google AMP amp-accordion?
            

        
    
        
            

                How to create Auto-collapsing accordion using Google AMP amp-accordion ?
            

        
    
        
            

                How to create Animated accordion using Google AMP amp-accordion ?
            

        
    
        
            

                How to create Comparison accordion using Google AMP amp-accordion ?
            

        
    
        
            

                Angular PrimeNG Accordion Properties for Accordion
            

        
    
        
            

                How to Change Bootstrap Accordion Background Color ?
            

        
    
        
            

                Angular PrimeNG Accordion Tab Change Event
            

        
    
        
            

                How to create a radio button similar to toggle button using Bootstrap ?
            

        
    
        
            

                How to change the position of modal close button in bootstrap?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
V

        

            
        

        

                                    


                                    

                                        VigneshKannan3                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox