Los acordeones Spectre brindan un acordeón simple al extender el componente del panel. El uso del atributo principal de datos para asegurarse de que todos los elementos plegables bajo el padre especificado se cerrarán cuando se muestre uno de los elementos plegables.
Alternativamente, puede usar detalles y resumen en lugar de la radio de entrada o el truco de la casilla de verificación. Agregue el atributo abierto a los detalles para expandirlo. Se está considerando la compatibilidad con Microsoft Edge.
Clase de acordeones Spectre:
- acordeón: Esta clase se utiliza para crear los elementos de acordeón.
Nota: debe incluir el acordeón-1 como una identificación en el campo de entrada donde adjuntará el ícono para la caída.
Sintaxis:
<div class="accordion"> ... </div>
El siguiente ejemplo ilustra el ejemplo de Spectre Accordion:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Accordion Class</strong> <br><br> <div class="accordion"> <input type="checkbox" id="accordion-1" hidden> <label class="accordion-header" for="accordion-1"> <i class="icon icon-arrow-right mr-1"></i> Geeksforgeeks </label> <div class="accordion-body"> <p> Image result for Geeksforgeeks description We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. Knowledge is power! </p> </div> </div> </center> </body> </html>
Producción:
Acordeones de espectro
Referencia: https://picturepan2.github.io/spectre/components/accordions.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA