Las secciones contraíbles son secciones de contenido que pueden reducirse y expandirse al hacer clic en ellas. Son una forma popular de organizar el contenido de tal manera que el usuario podrá ver el contenido de una sección solo si así lo desea. En este artículo, aprenderemos cómo crear una sección plegable simple usando CSS y JavaScript.
Se hace usando un botón y encerrando el contenido de la sección en un div. El detector de eventos se agrega al botón para escuchar los clics del mouse. La clase «Activo» se alterna con cada clic de botón. Cuando se expande la sección, el color de fondo del botón cambia. Además, la propiedad «mostrar» del contenido se cambia a «bloquear» en el evento del botón de clic para que sea visible cuando es «ninguno» (oculto) y viceversa, como se muestra a continuación.
Ejemplo 1:
<!DOCTYPE html>
<html>
<style>
.collapse {
background-color: #a2de96;
border: none;
outline: none;
font-size: 25px;
}
.active,
.collapse:hover {
background-color: #438a5e;
}
.text {
background-color: #e1ffc2;
display: none;
font-size: 20px;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<button type="button" class="collapse">
Open Collapsible section
</button>
<div class="text">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles, quizzes and ...
</div>
<script>
var btn = document.getElementsByClassName("collapse");
btn[0].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
</script>
</body>
</html>
Producción:
- Contraído:
- Expandido:
Ejemplo 2: El «ancho» del botón colapsar y el contenido se establece en 50% y el contenido está alineado «al centro».
<!DOCTYPE html>
<html>
<head>
<style>
.collapse {
background-color: #a2de96;
border: none;
outline: none;
font-size: 25px;
}
.active,
.collapse:hover {
background-color: #438a5e;
}
.text {
background-color: #e1ffc2;
display: none;
font-size: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button type="button" class="collapse">
Open Collapsible section
</button>
<div class="text">
How to create a collapsible
section using CSS and JavaScript?
</div>
<script>
var btn = document
.getElementsByClassName("collapse");
btn[0].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
</script>
</body>
</html>
Producción:
- Contraído:
- Expandido:
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA