Cómo crear acordeones con JavaScript?

En este artículo, vamos a aprender cómo crear acordeones con JavaScript ? Post contiene tutorial, código de ejemplo y la demostración.

En la web moderna, la gente simplemente no está satisfecho con el texto aburrido en la pantalla. Imágenes podrían ayudar, pero lo que si su contenido es único texto? Con JavaScript moderna, puede darle vida a cualquier cosa en su página web. Mejorar su aspecto, animan los elementos de la página o incluso mantener los mini juegos como efectos sobre el movimiento del ratón. Esos trucos class algún otro día, pero hoy en día, vamos a ver cómo crear acordeones con JavaScript ?

Acordeones son elementos que tienen una pestaña como la estructura, que oculta el contenido bajo su cabecera, una especie de categoría. Cuando el usuario hace clic en el encabezado, las diapositivas de elementos de contenido hacia abajo y muestra el contenido bajo ese encabezado.

Comenzando primero con barebones HTML estructura, necesitamos dos cosas, una sola partida y otro es el contenido por debajo de ella que se mostrará cuando el usuario hace clic en esta cabecera.

<div class="container">
<p>accordion Example</p>
<div class="accordion-container">
<div class="accordion">
<h2 class="accordion-header">Tab 1</h2>
<div class="content">
<p>Welcome to Tab 1</p>
</div>
</div>
<div class="accordion">
<h2 class="accordion-header">Tab 2</h2>
<div class="content">
<p>Welcome to Tab 2</p>
</div>
</div>
<div class="accordion">
<h2 class="accordion-header">Tab 3</h2>
<div class="content">
<p>Welcome to Tab 3</p>
</div>
</div>
</div>
</div>

Aquí tenemos un padre .container for nuestro código. Dentro de esto, tenemos un ejemplo simple que muestra el texto de acordeón.

A continuación, tenemos div contenedor class acordeón llamado .accordion-contenedor que contendrá todos los elementos .accordion . Dentro de cada elemento de acordeón tenemos un elemento h2, que es nuestra cabecera con el for .accordion-cabecera y debajo de ella tenemos .Este contenido elemento que envuelve nuestro contenido.

Cuando el usuario hará clic en el encabezado de acordeón, entonces este contenido se mostrará al usuario. Hemos creado tres instancias de esta estructura, debido a que un acordeón normal tiene múltiples elementos de contenido indvidual.

Ahora, vamos a este estilo un poco. Aquí está la for estilo CSS acordeón .

.accordion-header {
background: #e76;
color: #fff;
padding: 5px 10px;
margin: 0;
cursor: pointer;
}
.accordion {
border: 2px solid #e76;
}
.accordion .content {
height: 0px;
overflow-y: hidden;
padding: 0px 10px;
}
.full-height {
height: auto !important;
}

Lo class señalar aquí es que inicialmente hemos proporcionado altura 0px al contenido, ya que no queremos que se muestran arriba. A continuación tenemos un class secundaria, .full altura que tiene el estilo, altura:! Automático importante que cambiará la altura de automóviles. Tenga en cuenta el ! condición importante aquí, porque lo queremos como la más alta prioridad.

Ahora, llega el momento de añadir la magia real para que sea funcional.

//Get the elements based on their class name
var tabs = document.getElementsByClassName('accordion-header');
for(var i=0; i<tabs.length; i++) {
// Add event listener to each accordion element
tabs[i].addEventListener('click', function() {
var content = this.nextElementSibling;
content.classList.toggle('full-height');
});
}

En este código, primero tenemos una variable pestañas que mantiene el conjunto de acordeón cabecera elementos, que no son sino nuestros protocolos es.

Ahora, class cada elemento de esta matriz, lo necesitamos para responder en clics. Para que esto ocurra, tenemos que añadir un detector de eventos para registrar clic, y en su interior que necesitamos el siguiente elemento de esta cabecera, que es nuestro elemento de contenido.

Ahora, utilizando el this.nextElementSibling obtenemos el siguiente elemento que corresponde al elemento de acordeón cabecera actual. A continuación alternar la class de altura completa class este elemento de contenido. Lo hacemos de palanca en lugar de sumar de manera que en la segunda posición, la palanca se eliminará el for de altura completa del elemento y se main a la altura 0px, fijamos class .Este contenido elemento en el CSS.

Así es como se puede crear fácilmente el contenido de acordeón con JavaScript y CSS.

Pedido Demo en vivo aquí.

salida

How to create accordions with JavaScript? - 4

Si te gusta este artículo, por favor, comentar y compartir sus pensamientos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *