En Bootstrap 4, no hay una opción predeterminada para cambiar el símbolo (-, +) con un acordeón de botones. Por lo tanto, se puede hacer usando jQuery. El siguiente enfoque lo explicará claramente.
Acercarse:
- Fuente impresionante o cualquier utilidad de icono para mostrar el símbolo (-, +):
<enlace rel=”hoja de estilo” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css” integridad=”sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ” crossorigin=”anónimo”>
- Convierta la etiqueta div con class=”card-header” en un botón de la siguiente manera: Puede usar los atributos data-target y data-toggle en cualquier botón para hacer un acordeón de botones. Finalmente, use el método jQuery toggleClass() para cambiar el símbolo (-, +) con un botón Bootstrap Accordion En fontawesome, class=”fas fa-plus” para el símbolo más y class=”fas fa-minus” para el símbolo más.
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>
Sintaxis:
$(selector).toggleClass('fas fa-plus fas fa-minus');
Ejemplo 1: el siguiente ejemplo ilustra cómo cambiar el símbolo en el acordeón de botones usando 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>
Producción:
Ejemplo 2: el siguiente ejemplo ilustra cómo cambiar el símbolo en el botón plegable usando 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>
<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>
Producción:
Referencia: https://api.jquery.com/toggleClass/#toggleClass-className
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA