Progresivamente mejorado complemento de alternancia de contenido-ARIA alternar bloques
| Autor: | scottaohara |
|---|---|
| Views Total: | 575 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 21, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Los bloques de alternancia ARIA son una biblioteca de alternancia de contenido accesible y progresivamente mejorada para Mostrar y ocultar secciones de contenido con botones de alternancia.
Funcionamiento
Cargue la hoja de estilos ' Aria. Toggle. css ' y el archivo JavaScript ' Aria. Toggle. js ' en la página.
<link rel="stylesheet" href="aria.toggle.css"> <script src="aria.toggle.js"></script>
Agregue el atributo Data-Action = "Aria-Toggle" al contenido togglable y listo.
<div data-action="aria-toggle" class="atblock"> <h3 class="atblock__trigger"> <a href="#demo"> Example </a> </h3> <div id="demo" class="atblock__panel"> <p> content that is toggled </p> </div> </div>
Agregue el atributo Data-Action = "Aria-Toggle" al contenido togglable y listo.
<div data-action="aria-toggle" class="atblock"> <h3 class="atblock__trigger"> <span>Parent Toggle</span> </h3> <div class="atblock__panel"> <p style="margin-bottom: 12px"> Content that is toggled </p> <div data-action="aria-toggle" data-expanded class="atblock"> <h3 class="atblock__trigger"> <span>Nested Toggle</span> </h3> <div class="atblock__panel"> <p> Maybe you should be using an accordion instead? </p> </div> </div> </div> </div>
