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