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