El siguiente ejemplo muestra un acordeón simple al extender el componente del panel. El uso del atributo principal de datos para asegurarse de que todos los elementos plegables bajo el padre especificado se cerrarán cuando se muestre uno de los elementos plegables.
Hay tantos tipos de acordeón
- Acordeón predeterminado
- Acordeón con iconos
- Acordeón con fondo degradado
- Acordeón con una imagen
A continuación, verá cada uno de ellos en acción con el ejemplo adecuado.
- Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Collapse Demonstration</title> <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"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.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> <div class="container"> <h2 style="padding-bottom: 15px; color:green;"> GeeksforGeeks </h2> <p>A Computer Science Portal for Geeks</p> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#description1"> GeeksforGeeks </a> </div> <div id="description1" class="collapse show" data-parent="#accordion"> <div class="card-body"> GeeksforGeeks is a computer science portal. It is the best platform to lean programming. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#description2"> Bootstrap </a> </div> <div id="description2" class="collapse" data-parent="#accordion"> <div class="card-body"> Bootstrap is free and open-source collection of tools for creating websites and web applications. </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#description3"> HTML </a> </div> <div id="description3" class="collapse" data-parent="#accordion"> <div class="card-body"> HTML stands for HyperText Markup Language. It is used to design web pages using markup language. </div> </div> </div> </div> </div> </body> </html>
- Producción:
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Accordion </title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
.accordion {
margin: 15px;
}
.accordion .fa {
margin-right: 0.2rem;
}
</style>
<script>
$(document).ready(function () {
// Add minus icon for collapse element which
// is open by default
$(".collapse.show").each(function () {
$(this).prev(".card-header").find(".fa")
.addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide
// of collapse element
$(".collapse").on('show.bs.collapse', function () {
$(this).prev(".card-header").find(".fa")
.removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function () {
$(this).prev(".card-header").find(".fa")
.removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
</head>
<body>
<div class="accordion">
<h2 style="padding-bottom: 15px; color:green;">
GeeksforGeeks
</h2>
<p>A Computer Science Portal for Geeks</p>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link"
data-toggle="collapse"
data-target="#collapseOne">
<i class="fa fa-plus"></i>
GeeksforGeeks
</button>
</h2>
</div>
<div id="collapseOne" class="collapse"
aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<p>
GeeksforGeeks is a computer
science portal. It is the best
platform to lean programming.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button"
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseTwo">
<i class="fa fa-plus"></i>
Bootstrap
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show"
aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="card-body">
<p>
Bootstrap is a free and open-source
collection of tools for creating
websites and web applications.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button"
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseThree">
<i class="fa fa-plus"></i>
HTML
</button>
</h2>
</div>
<div id="collapseThree" class="collapse"
aria-labelledby="headingThree"
data-parent="#accordionExample">
<div class="card-body">
<p>
HTML stands for HyperText Markup
Language. It is used to design
web pages using markup language.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- Producción:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Collapse Demonstration</title>
<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">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
.card-header {
background-image: linear-gradient(to bottom, green, yellow);
}
.card-body {
background-image: linear-gradient(to right, yellow, white);
}
</style>
</head>
<body>
<div class="container">
<h2 style="padding-bottom: 15px; color:green;">
GeeksforGeeks</h2>
<p>A Computer Science Portal for Geeks</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse"
href="#description1">
GeeksforGeeks
</a>
</div>
<div id="description1" class="collapse show"
data-parent="#accordion">
<div class="card-body">
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link"
data-toggle="collapse"
href="#description2">
Bootstrap
</a>
</div>
<div id="description2" class="collapse"
data-parent="#accordion">
<div class="card-body">
Bootstrap is a free and open-source
collection of tools for creating
websites and web applications.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link"
data-toggle="collapse"
href="#description3">
HTML
</a>
</div>
<div id="description3" class="collapse"
data-parent="#accordion">
<div class="card-body">
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- Producción:
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Collapse Demonstration</title>
<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">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
.card {
width: 600px;
}
.card-body {
width: 400px;
float: left;
}
.right-body {
width: 100px;
margin: 10px;
float: right;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<h2 style="padding-bottom: 15px; color:green;">
GeeksforGeeks</h2>
<p>A Computer Science Portal for Geeks</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse"
href="#description1">
GeeksforGeeks
</a>
</div>
<div id="description1" class="collapse show"
data-parent="#accordion">
<div class="card-body">
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</div>
<div class="right-body">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png">
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link"
data-toggle="collapse"
href="#description2">
Bootstrap
</a>
</div>
<div id="description2" class="collapse"
data-parent="#accordion">
<div class="card-body">
Bootstrap is a free and open-source
collection of tools for creating
websites and web applications.
</div>
<div class="right-body">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191126170417/logo6.png">
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link"
data-toggle="collapse"
href="#description3">
HTML
</a>
</div>
<div id="description3" class="collapse"
data-parent="#accordion">
<div class="card-body">
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language.
</div>
<div class="right-body">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA