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

    
    

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

chevron_right


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

chevron_right


Output:

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




My Personal Notes arrow_drop_up

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.