Foundation CSS Accordion se utiliza para mostrar una gran cantidad de información en un lugar muy pequeño dentro de un contenedor. Podemos acceder a cada uno de ellos cambiando entre los diferentes elementos. Las opciones avanzadas de acordeón contienen varias opciones para el acordeón, que incluyen la expansión múltiple del acordeón, cerrar todos los acordeones en un momento y deshabilitar el acceso a los acordeones.
Opciones avanzadas de Foundation CSS Accordion:
- Expansión múltiple: Esto nos ayuda a expandir múltiples paneles.
- Todo cerrado: Esto nos ayuda a cerrar todos los paneles.
- Deshabilitado: Esto nos ayuda a deshabilitar los paneles.
Atributos de opciones avanzadas de Foundation CSS Accordion:
- data-accordion : este atributo habilita las opciones de acordeón y debe especificarse antes de los atributos requeridos.
- data-multi-expand: este atributo se utiliza para abrir varios paneles al mismo tiempo.
- data-allow-all-closed: este atributo se utiliza para cerrar todos los paneles.
- disabled: este atributo se utiliza para desactivar los paneles.
Sintaxis:
<ul class="accordion" data-accordion
Accordion-Advanced-Options-Attribute" >
Content
</ul>
Ejemplo 1: El siguiente ejemplo demuestra las opciones avanzadas de Foundation CSS Accordion usando el atributo Multi-expand .
HTML
<!DOCTYPE html> <html> <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: 50px;"> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3> Foundation CSS Accordion Advanced Options - Multi-expand </h3> <ul class="accordion" data-accordion data-multi-expand="true"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 1</a> <div class="accordion-content" data-tab-content> <p> A Computer Science portal for geeks. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 2</a> <div class="accordion-content" data-tab-content> <p> Computer Science portal </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 3</a> <div class="accordion-content" data-tab-content> <p> GeeksforGeeks </p> </div> </li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Opciones avanzadas de Foundation CSS Accordion: expansión múltiple
Ejemplo 2: El siguiente ejemplo muestra las opciones avanzadas de Foundation CSS Accordion usando el atributo Todo cerrado .
HTML
<!DOCTYPE html> <html> <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: 50px;"> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3> Foundation CSS Accordion Advanced Options - All Closed </h3> <ul class="accordion" data-accordion data-allow-all-closed="true"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 1</a> <div class="accordion-content" data-tab-content> <p> A Computer Science portal for geeks. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 2</a> <div class="accordion-content" data-tab-content> <p> Computer Science portal </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 3</a> <div class="accordion-content" data-tab-content> <p> GeeksforGeeks </p> </div> </li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Opciones avanzadas de Foundation CSS Accordion: todo cerrado
Ejemplo 3: El siguiente ejemplo demuestra las opciones avanzadas de Foundation CSS Accordion usando el atributo Disabled .
HTML
<!DOCTYPE html> <html> <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: 50px;"> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3> Foundation CSS Accordion Advanced Options - Disabled </h3> <ul class="accordion" data-accordion disabled> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 1</a> <div class="accordion-content" data-tab-content> <p> A Computer Science portal for geeks. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 2 </a> <div class="accordion-content" data-tab-content> <p> Computer Science portal </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title">GFG 3</a> <div class="accordion-content" data-tab-content> <p> GeeksforGeeks </p> </div> </li> </ul> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Opciones avanzadas de Foundation CSS Accordion: deshabilitado
Referencia: https://get.foundation/sites/docs/accordion.html#advanced-options
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA