Accordions Component

Acordeones con apertura única

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Describe la estructura de una página web mediante elementos que le indican al navegador cómo mostrar el contenido.

Es la base de todas las páginas web
Define la estructura del contenido
Utiliza etiquetas para definir elementos

¿Qué es CSS?

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML. CSS describe cómo deben mostrarse los elementos HTML.

Define los estilos visuales
Permite la separación de contenido y diseño
Facilita el diseño responsivo

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que permite implementar funcionalidades complejas en páginas web. Cada vez que una página web hace más que simplemente mostrar información estática, es probable que JavaScript esté involucrado.

Añade interactividad a las páginas web
Permite la manipulación dinámica del DOM
Facilita la comunicación con servidores

Código HTML

<!-- Importar el componente -->
<script src="accordions-component/index.js"></script>
<link rel="stylesheet" href="accordions-component/index.css">

<!-- Implementación básica con apertura única -->
<accordions-component data-open-one-by-one>
  <details class="accordion" data-accordion open>
    <summary class="accordion-trigger" data-accordion-trigger>
      <span class="accordion-title">¿Qué es HTML?</span>
      <div class="accordion-asset-wrapper">
        <svg>...</svg>
      </div>
    </summary>

    <div class="accordion-content" data-accordion-content>
      <p>HTML (HyperText Markup Language) es...</p>
    </div>
  </details>

  <details class="accordion" data-accordion>
    <!-- Más acordeones aquí -->
  </details>
</accordions-component>

Atributos importantes

<!-- data-open-one-by-one: Solo permite abrir un acordeón a la vez -->
<accordions-component data-open-one-by-one>...</accordions-component>

<!-- open: Establece que el acordeón esté abierto inicialmente -->
<details class="accordion" data-accordion open>...</details>

Acordeones con múltiple apertura

Sección 1: Introducción

Esta es la introducción al curso de desarrollo web. Aquí encontrarás información básica sobre los temas que se cubrirán durante todo el programa de estudios.

En esta sección aprenderás los conceptos básicos de desarrollo web y cómo funcionan las tecnologías web modernas. También veremos las herramientas que necesitarás para comenzar tu viaje como desarrollador web.

Sección 2: Conceptos fundamentales

En esta sección se abordan los conceptos fundamentales que debes conocer para el desarrollo web:

Estructura y semántica de HTML
Selectores CSS y cascada de estilos
Conceptos básicos de JavaScript
Modelos de caja y diseño responsive

Sección 3: Temas avanzados

Esta sección cubre temas avanzados para usuarios con experiencia previa en desarrollo web:

Frameworks y librerías modernas
APIs y comunicación asíncrona
Patrones de diseño avanzados
Optimización y rendimiento

En este ejemplo, puedes abrir múltiples acordeones simultáneamente, ya que no se ha especificado el atributo data-open-one-by-one.

Código HTML

<!-- Implementación con múltiple apertura -->
<accordions-component>
  <details class="accordion" data-accordion open>
    <summary class="accordion-trigger" data-accordion-trigger>
      <span class="accordion-title">Sección 1: Introducción</span>
      <div class="accordion-asset-wrapper">
        <svg>...</svg>
      </div>
    </summary>

    <div class="accordion-content" data-accordion-content>
      <p>Esta es la introducción al curso...</p>
    </div>
  </details>

  <!-- Más acordeones aquí -->
</accordions-component>

JavaScript

// Obtener referencia al componente
const accordions = document.querySelector('accordions-component');

// Cerrar todos los acordeones
accordions.closeAllAccordions();

// Abrir un acordeón específico mediante JavaScript
const secondAccordion = accordions.querySelectorAll('[data-accordion]')[1];
secondAccordion.open = true;

Acordeones con estilos personalizados

Estilo Moderno

Planes y precios

Ofrecemos diferentes planes adaptados a tus necesidades, desde versiones gratuitas hasta planes empresariales con soporte dedicado.

Estilo con Bordes

Preguntas frecuentes

Encuentra respuestas a las preguntas más comunes sobre nuestros productos y servicios.

Estilo Minimalista

Información de contacto

Puedes contactarnos a través de nuestro formulario en línea o llamando al número de atención al cliente.

Ubicación

Nos encontramos en la ciudad de Barcelona, España. Visita nuestra oficina en horario de 9:00 a 18:00 de lunes a viernes.

Estilos CSS

/* Estilo Moderno */
.accordion-modern {
  --accordion-border: none;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 8px !important;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.accordion-modern .accordion-trigger {
  padding: 15px 20px;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.2);
}

.accordion-modern .accordion-content {
  padding: 0 20px 20px;
}

/* Estilo con Bordes */
.accordion-bordered {
  --accordion-border: 2px solid #4caf50;
  border-radius: 4px !important;
  margin-bottom: 15px;
}

.accordion-bordered .accordion-trigger {
  padding: 12px 15px;
  background-color: rgba(76, 175, 80, 0.1);
}

/* Estilo Minimalista */
.accordion-minimal {
  --accordion-border: none;
  background-color: transparent;
  border-bottom: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 0 !important;
}

.accordion-minimal .accordion-trigger {
  padding: 15px 0;
}

.accordion-minimal .accordion-content {
  padding: 0 0 15px;
}

HTML con clases personalizadas

<details class="accordion accordion-modern" data-accordion>
  <summary class="accordion-trigger" data-accordion-trigger>
    <span class="accordion-title">Planes y precios</span>
    <div class="accordion-asset-wrapper">
      <svg>...</svg>
    </div>
  </summary>

  <div class="accordion-content" data-accordion-content>
    <p>Contenido del acordeón...</p>
  </div>
</details>

Control mediante JavaScript

Menú Principal

Esta sección contiene las opciones principales del menú. Cada opción te llevará a una sección diferente de la aplicación.

Configuración

Aquí puedes modificar todas las configuraciones de la aplicación, incluyendo ajustes de perfil, notificaciones y preferencias de visualización.

Ayuda

Sección de ayuda y soporte técnico. Aquí encontrarás tutoriales, guías y la información de contacto con nuestro equipo de soporte.

Estado: Ningún acordeón abierto

Control mediante JavaScript

// Obtener referencia al componente
const jsAccordions = document.getElementById('js-accordions');
const statusElement = document.getElementById('accordion-status');

// Obtener todos los acordeones
const accordionItems = jsAccordions.querySelectorAll('[data-accordion]');

// Abrir el primer acordeón
document.getElementById('open-first-js').addEventListener('click', () => {
  accordionItems[0].open = true;
  updateStatus();
});

// Abrir el segundo acordeón
document.getElementById('open-second-js').addEventListener('click', () => {
  accordionItems[1].open = true;
  updateStatus();
});

// Abrir el tercer acordeón
document.getElementById('open-third-js').addEventListener('click', () => {
  accordionItems[2].open = true;
  updateStatus();
});

// Cerrar todos los acordeones
document.getElementById('close-all-js').addEventListener('click', () => {
  jsAccordions.closeAllAccordions();
  updateStatus();
});

// Actualizar el estado mostrado
function updateStatus() {
  const openAccordions = [...accordionItems]
    .filter(item => item.open)
    .map((item, index) => `Acordeón ${index + 1}`);
  
  statusElement.textContent = openAccordions.length 
    ? `Estado: Abierto(s): ${openAccordions.join(', ')}` 
    : 'Estado: Ningún acordeón abierto';
}

// Escuchar cambios en los acordeones
accordionItems.forEach((item, index) => {
  item.addEventListener('toggle', () => {
    updateStatus();
  });
});

Métodos disponibles

// Métodos disponibles en el componente accordions-component:

// Cerrar todos los acordeones
accordionsComponent.closeAllAccordions();

// Manipular acordeones individuales
const accordionElement = accordionsComponent.querySelector('[data-accordion]');
accordionElement.open = true;  // Abrir un acordeón
accordionElement.open = false; // Cerrar un acordeón

Ejemplos de uso

Acordeones con apertura única

Código HTML

Atributos importantes

Acordeones con múltiple apertura

Código HTML

JavaScript

Acordeones con estilos personalizados

Estilo Moderno

Estilo con Bordes

Estilo Minimalista

Estilos CSS

HTML con clases personalizadas

Control mediante JavaScript

Control mediante JavaScript

Métodos disponibles