¿Sabía que existe una solución HTML5 nativa para crear muy fácilmente un botón acordeón de lectura más/menos para ocultar y revelar contenido con SIN JavaScript o CSS. Sigue leyendo para saber cómo.
La y Las etiquetas HTML5 son oficialmente un elemento de widget de divulgación, Pero el Emparejado con Las etiquetas HTML5 le darán una acordeón solo HTML puro.
Sentido sin JS O CSS se necesita ¡Cuan genial es eso!
Aquí hay un ejemplo que muestra un elemento simple con un y .
Aquí está el código:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>y así es como se verá:
Leer Más
Este es un acordeón HTML5 nativo para ocultar y revelar contenido. Bastante genial, ¿verdad?
¿Cómo funciona? La La etiqueta sirve como envoltorio para un elemento que se puede abrir o cerrar. El usuario tiene que hacer clic en la etiqueta que es el etiqueta para abrir o cerrar el elemento.
¿Qué pasa con el estilo y el comportamiento?
Estilos
Puede aplicar estilos CSS para personalizar la apariencia del cuadro de texto revelado. A continuación se muestra un estilo de interfaz con pestañas:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}De forma predeterminada, el cursor aparece como una flecha, pero si desea que sea una mano apuntando en su lugar, entonces usa esto:
details {
cursor: pointer;
}comportamientos
Establecer comportamientos es muy limitado, realmente solo hay una cosa que puede hacer y es hacer que el texto revelado abrir por defecto.
Para iniciar el acordeón en su estado abierto, agregue el valor booleano habiertos atribuir a la tag:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Leer Más
Este es un acordeón HTML5 nativo para ocultar y revelar contenido. Bastante genial, ¿verdad?
¿Qué atributos puedo usar?
Los siguientes atributos se pueden utilizar para la tag:
| Atributo | Valor | Resumen |
|---|---|---|
| habiertos | habiertos | El valor predeterminado es no abierto. |
| id | propuesta de | Proporciona un identificador único. |
| clase | nombres de clase | Asigna nombres de clase al elemento. |
| papa | valores CSS | Asigna estilos CSS al elemento. |
Entonces, ¿cuáles son las limitaciones? Siempre hay una trampa, ¿no?
Sin soporte para Internet Explorer
Este acordeón solo para HTML5 no funcionará en ninguna versión de Internet Explorer. Si tiene que hacer que sea compatible con IE11, tendrá que usar una solución alternativa diferente usando JQuery. Todos los demás navegadores son compatibles y .
Sin animaciones ni transiciones personalizadas
Si bien puede modificar y diseñar la apariencia (como se muestra arriba), no podrá hacer que el texto revele animaciones o transiciones. Si desea hacer eso, necesitará otra solución de acordeón CSS/JSS.
Lectores de pantalla y accesibilidad
esto es nativo HTML5 y *debería ser* accesible, pero se descubrió que el texto real revelado no siempre se anuncia correctamente mediante un lector de pantalla.
Referencias:
