SCRIPT ABRIR/CERRAR MÚLTIPLES DIVS - TOGGLE LINKS (Texto e Íconos)
DEMO Abrir/Cerrar DIVS - Toggle Links
En el ejemplo anterior (Toggle Links), vemos que los DIVS ocultos se muestran justo debajo del enlace al que le hemos dado click. Estas capas escondidas pueden contener cualquier tipo de códigos y las podemos personalizar con CSS. Además, se pueden utilizar múltiples veces en la misma página, pues se han creado usando el atributo "class" en su estructura y se manejan con un sencillo código de javascript.
Para utilizar estas ventanas o capas (DIVS) que se abren y cierran al hacer click sobre un enlace (<a> Show + </a>), creamos los siguientes 3 archivos:
1- toggle-estilos.css (CSS)
/* Estilo base */
body {
font-family: Arial, sans-serif;
padding: 20px
}
/* Capa escondida */
.toggle-div {
display: none;
background-color: #f4f4f4;
padding: 20px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px
}
/* Estilo del enlace a */
.toggle-link {
color: #007bff;
text-decoration: none;
font-weight: bold
}
.toggle-link:hover {
text-decoration: underline
}
2- pagina.html (HTML)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demostración TOGGLE LINKS - Abrir/Cerrar DIV</title>
<meta name="description" content="Este es el ejemplo de Toggle Links - Abrir/Cerrar enlaces">
<meta name="keywords" content="javascript toggle links abrir cerrar divs">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Estilos -->
<link rel="stylesheet" href="toggle-estilos.css">
<!-------------------------------------------------- Link to Font Awesome icons ------------------------------------------>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- toggle-link SCRIPT -->
<script async src="toggle-link.js"></script>
</head>
<body>
<!-- Primer enlace a y primer DIV oculto -->
<p><a href="javascript:void(0);" class="toggle-link">
1 Show <i class="fas fa-plus"></i> <!-- Icon for "Show More" -->
</a></p>
<div class="toggle-div">
<p>Primer texto o imagen que aparece al dar click en enlace (1). El enlace <a> Show + </a> está contenido en un párrafo dentro de "p" y "/p" (1)</p>
</div>
<p>Actualizar ruta URL de los íconos (AQUÍ, otros textos o lo que sea)</p>
<!-- Segundo enlace a y segundo DIV oculto -->
<p><a href="javascript:void(0);" class="toggle-link">
2 Show <i class="fas fa-plus"></i> <!-- Icon for "Show More" -->
</a></p>
<div class="toggle-div">
<p>Segundo DIV que se muestra al hacer click sobre el enlace <a> Show + </a>. Estas capas ocultas pueden contener cualquier texto, audio, video, imagen, etc. (2)</p>
</div>
</body>
</html>
NOTA: La hoja de estilos (toggle-estilos.css) y el script (toggle-link.js) se han relacionado entre <head> y </head> de la "pagina.html"; también se ha añadido el link a la web que contiene los íconos usados:
<!-- Estilos -->
<link rel="stylesheet" href="toggle-estilos.css">
<!-------------------------------------------------- Link to Font Awesome icons ------------------------------------------>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- toggle-link SCRIPT -->
<script async src="toggle-link.js"></script>
3- toggle-link.js (JAVASCRIPT)
const toggleLinks = document.querySelectorAll('.toggle-link');
toggleLinks.forEach(function(link) {
link.addEventListener('click', function() {
const div = link.closest('p').nextElementSibling; // Cambiar esta parte si NO se usa <p> y </p> en la "pagina.html"
const icon = link.querySelector('i'); // Llamar el icon
// Toggle - Cambiar visibilidad del div
if (div.style.display === 'none' || div.style.display === '') {
div.style.display = 'block';
icon.classList.remove('fa-plus');
icon.classList.add('fa-minus');
} else {
div.style.display = 'none';
icon.classList.remove('fa-minus');
icon.classList.add('fa-plus');
}
});
});
Importante:
El SCRIPT anterior (toggle-link.js) se utiliza, tal como aparece, cuando el enlace (<a> </a>) de la pagina.html está dentro de un párrafo, es decir, dentro de <p> y </p>.
Si el enlace a la caja oculta aparece, solamente, entre <a> y </a>, cambiamos esta parte del código javascript así:
QUITAR
const div = link.closest('p').nextElementSibling; // Cambiar esta parte si NO se usa <p> y </p> en la "pagina.html"
PEGAR
const div = link.nextElementSibling; // Pegar este fragmento si solo aparece <a> y </a> en la "pagina.html"
Eso es todo.