A veces tenemos mucho contenido para mostrar y para que el sitio web se vea bonito y corto, usamos los cuadros de texto plegables. Los cuadros de texto plegables son esa división que es la combinación de encabezado y contenido, generalmente solo el encabezado es visible, pero cuando se presiona, se muestra el contenido.
Configuración:
Tienes que importar el componente amp-accordion en tu encabezado para usar esta etiqueta.
HTML
<script async custom-element="amp-accordion" src= "https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script>
Para hacer un acordeón con colapso automático, use el código que se menciona a continuación. El atributo expand-single-section lo ayuda a permitir que solo una sección se expanda a la vez.
HTML
<amp-accordion class="sample" expand-single-section> <!-- Code --> </amp-accordion>
Ejemplo:
HTML
<!doctype html> <html amp> <head> <meta charset="utf-8"> <title>Google AMP amp-accordion</title> <script async src= "https://cdn.ampproject.org/v0.js"> </script> <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script> <link rel="canonical" href= "https://amp.dev/documentation/examples/components/amp-accordion/index.html"> <meta name="viewport" content= "width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both; } @-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } </style> <noscript> <style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none } </style> </noscript> <style amp-custom> amp-accordion section[expanded] .show-more { display: none; } /* These styles are not required for the samples to work */ :root { --space-2: 1rem; } amp-accordion.sample { margin: var(--space-2); } h1, h4 { color: green; } h1 { text-align: center; } section { color: crimson; } </style> <meta name="robots" content="noindex, nofollow"> </head> <body> <h1> Geeks For Geeks </h1> <amp-accordion class="sample" expand-single-section> <section> <h4>Section 1</h4> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </section> <section> <h4>Section 2</h4> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </section> <section> <h4>Section 3</h4> <p> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </p> </section> </amp-accordion> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA