Fundación CSS Acordeón

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.

Todos hemos visto Accordion en sitios web modernos. Nos ayuda a mostrar una gran cantidad de información en un lugar muy pequeño dentro de un contenedor. Así, nos ayuda a organizar grandes cantidades de datos de forma estructurada y podemos acceder a cada uno de ellos cambiando entre los diferentes elementos. En este artículo, aprenderemos cómo hacer un acordeón usando Foundation CSS.

Clases básicas de acordeón CSS:

  • acordeón: esta clase se utiliza para crear el acordeón junto con los atributos de acordeón de datos .
  • elemento-acordeón: Dentro del acordeón, habrá una serie de paneles con esta clase que estarán activos (es decir, abiertos) o se abrirán al hacer clic. Para hacer que un panel se abra, la clase está activa debe agregarse a ese panel.
  • Accordion-title: Cada panel del Acordeón tiene un título que está escrito dentro de la etiqueta <a> con el nombre de la clase Accordion-title.
  • contenido de acordeón: el contenido del acordeón se escribe con esta clase junto con el atributo de contenido de la pestaña de datos .

Por lo tanto, cuando organizamos todos estos elementos en una estructura, obtenemos una sintaxis común como la que se muestra a continuación:

Sintaxis:

<ul class="accordion" data-accordion>
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">..</a>
        <div class="accordion-content" data-tab-content>
            ...
        </div>
    </li>
</ul>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body style="padding: 30px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Accordion in Foundation CSS</h3>
    <ul class="accordion" data-accordion>
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 1</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 1</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 2</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 2</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 3</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 3</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 4</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 4</p>
            </div>
        </li>
  
    </ul>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Accordion

Nota: En este artículo, estamos usando el elemento <ul> para mostrar el elemento acordeón, pero se puede usar cualquier otro elemento según su demanda y necesidades.

Ahora, también podemos personalizar algunas características del acordeón utilizando las otras clases y atributos presentes en la biblioteca Foundation CSS.

Variante de expansión múltiple: de forma predeterminada, solo se puede expandir un panel del acordeón a la vez. Esta configuración se puede cambiar configurando el atributo «data-multi-expand» en verdadero en las etiquetas <ul></ul>. 

<ul class="accordion" data-accordion data-multi-expand="true">
    ...
</ul>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body style="padding: 30px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Accordion in Foundation CSS</h3>
    <ul class="accordion" data-accordion data-multi-expand="true">
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 1</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 1</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 2</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 2</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 3</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 3</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 4</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 4</p>
            </div>
        </li>
    </ul>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Accordion

Variante de todos cerrados: de forma predeterminada, al menos un panel siempre debe estar abierto en Accordion, pero este cambio se cambia al establecer el valor del atributo data-allow-all-closed en verdadero. Al cambiar esta función, ahora podemos mantener cerrados todos los paneles del acordeón.

Sintaxis:

<ul class="accordion" data-accordion data-allow-all-closed="true">
    ...
</ul>

Código completo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body style="padding: 30px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Accordion in Foundation CSS</h3>
    <ul class="accordion" data-accordion data-allow-all-closed="true">
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 1</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 1</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 2</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 2</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 3</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 3</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 4</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 4</p>
            </div>
        </li>
    </ul>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Accordion

Variante deshabilitada: Puede haber algunas condiciones en nuestro sitio web cuando no queremos que el usuario cambie de panel en el acordeón. Aquí entra en acción el atributo “deshabilitado” de la Fundación CSS. Al agregar la opción «deshabilitado» en el acordeón, podemos deshabilitarlo, no permitirá ningún cambio (es decir, cualquier panel que esté abierto no se puede cerrar, y cualquier panel que esté cerrado no se puede abrir).

Sintaxis:

<ul class="accordion" data-accordion disabled>
    ...
</ul>

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body style="padding: 30px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Accordion in Foundation CSS</h3>
    <ul class="accordion" data-accordion disabled>
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 1</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 1</p>
  
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 2</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 2</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 3</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 3</p>
            </div>
        </li>
  
        <li class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">Accordion 4</a>
            <div class="accordion-content" data-tab-content>
                <p>This is the Content of Accordion 4</p>
            </div>
        </li>
    </ul>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Foundation CSS Accordion

Referencia: https://get.foundation/sites/docs/accordion.html

Publicación traducida automáticamente

Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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