Js Acordeón Clásico

Js Acordeón Clásico → crea secciones plegables elegantes en NichoClean v2.0

El acordeón clásico en JavaScript es una de las funciones visuales más útiles y elegantes dentro de la plantilla NichoClean v2.0. Permite organizar el contenido en bloques plegables que se expanden o contraen al hacer clic, mejorando la experiencia del usuario, reduciendo el scroll y aportando dinamismo sin necesidad de usar librerías externas.

¿Qué es el acordeón clásico y por qué usarlo?

Un acordeón es una estructura de contenido en la que cada título o encabezado se puede abrir para mostrar información adicional. Es ideal para:

  • Mostrar preguntas frecuentes (FAQ).
  • Organizar tutoriales o pasos largos en bloques compactos.
  • Presentar especificaciones técnicas o listas extensas.
  • Mejorar la usabilidad móvil reduciendo desplazamiento vertical.

En la plantilla NichoClean v2.0, este componente está optimizado para ser ligero, responsive y totalmente personalizable con tu hoja de estilo minimalista.

Cómo funciona el script del acordeón clásico

El siguiente script en JavaScript puro (sin dependencias) permite abrir y cerrar paneles de contenido de forma fluida. Además, mantiene la regla de que solo un panel puede estar abierto a la vez, lo que mantiene el diseño limpio y ordenado.

<!-- 4. Js acordeón clásico -->
<script>
//<![CDATA[
  document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
      const isActive = header.classList.contains('is-active');
      // Cerrar todos
      document.querySelectorAll('.accordion-header').forEach(h => {
        h.classList.remove('is-active');
        h.nextElementSibling.style.maxHeight = null;
      });
      // Abrir el seleccionado si no estaba abierto
      if (!isActive) {
        header.classList.add('is-active');
        const content = header.nextElementSibling;
        content.style.maxHeight = content.scrollHeight + 'px';
      }
    });
  });
//]]>
</script>

👉 Este código debe ir justo antes del cierre de la etiqueta </body> o dentro de tu bloque de scripts globales si tu plantilla los agrupa.

Ejemplo del Acordeón con JS (toggle clase active)

Sección 1 - Título clickeable

Contenido de la sección 1. Aquí va texto o lo que necesites.

Sección 2 - Título clickeable

Contenido de la sección 2, más texto descriptivo.

Estructura HTML del acordeón

Para que el script funcione correctamente, tu bloque HTML debe seguir una estructura clara de encabezado y contenido:

<div class="accordion" id="accordionJS">
  <div class="accordion-item">
    <div class="accordion-header">Sección 1 - Título clickeable</div>
    <div class="accordion-content">
      <p>Contenido de la sección 1. Aquí va texto o lo que necesites.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Sección 2 - Título clickeable</div>
    <div class="accordion-content">
      <p>Contenido de la sección 2, más texto descriptivo.</p>
    </div>
  </div>
</div>

💡 Puedes incluir tantos .accordion-item como necesites. Cada uno se comportará de manera independiente pero coordinada.

Estilos CSS recomendados

Si tu plantilla NichoClean v2.0 ya cuenta con su hoja de estilos base, no es necesario incluir mucho más. Sin embargo, si quieres personalizar los colores o el comportamiento visual, puedes añadir algo como esto:

<style>
.accordion-header {
  cursor: pointer;
  background: #f8f9fa;
  color: #1f2937;
  font-weight: 600;
  padding: 1em;
  border: 1px solid #e5e7eb;
  transition: background 0.3s ease;
}
.accordion-header:hover {
  background: #f3f4f6;
}
.accordion-header.is-active {
  background: #e5e7eb;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 1em;
}
.accordion-content p {
  margin: 1em 0;
}
</style>

✅ Este CSS mantiene la estética minimalista y moderna de NichoClean, con bordes suaves, fondos claros y buena legibilidad en dispositivos móviles.

Pasos para instalar el acordeón clásico en NichoClean v2.0

  1. Copia el bloque HTML del acordeón en el editor de tu entrada o página donde desees mostrarlo.
  2. Pega el código JavaScript mostrado arriba al final del cuerpo del documento (antes de </body>).
  3. Verifica que las clases .accordion-header y .accordion-content estén escritas exactamente igual.
  4. Guarda y prueba tu entrada. Haz clic en los encabezados y verás cómo se despliegan suavemente.

Personalización y buenas prácticas

  • Si quieres permitir abrir varios acordeones al mismo tiempo, elimina la parte del código que “cierra todos” antes de abrir uno nuevo.
  • Usa encabezados cortos y descriptivos para no romper el diseño.
  • Evita anidar acordeones dentro de otros, ya que puede confundir al usuario.
  • Añade íconos con CSS (por ejemplo, un “+” o “−”) para indicar el estado activo.

El Js Acordeón Clásico de NichoClean v2.0 es una herramienta perfecta para presentar contenido de forma organizada, estética y funcional. Con un código limpio y adaptable, podrás mejorar la lectura, optimizar el espacio y ofrecer una experiencia más profesional a tus visitantes.

Recuerda que la plantilla NichoClean v2.0 está diseñada para mantener la armonía visual en cada componente, por lo que este acordeón encajará perfectamente sin romper el diseño global.

Experimenta, personaliza y lleva tu blog al siguiente nivel con los bloques dinámicos de NichoClean.