Você sabia que existe uma solução HTML5 nativa para criar facilmente um botão sanfona ler mais/menos para ocultar e revelar conteúdo com SEM JavaScript ou CSS. Leia mais para descobrir como.
A e As tags HTML5 são oficialmente um elemento de widget de divulgação, Mas o emparelhado com As tags HTML5 lhe darão uma acordeon somente HTML puro.
Significado sem JS OU CSS é preciso. Quão legal é isso!
Aqui está um exemplo mostrando um elemento simples com um e .
Aqui está o código:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>e veja como vai ficar:
Saiba Mais
Este é um acordeão HTML5 nativo para ocultar e revelar conteúdo. Bem legal, certo?
Como funciona? A serve como um wrapper para um elemento que pode ser aberto ou fechado. O usuário deve clicar no rótulo que é o tag para abrir ou fechar o elemento.
E quanto ao estilo e comportamento?
Estilos
Você pode aplicar o estilo CSS para personalizar a aparência da caixa de texto de revelação. O abaixo fornece um estilo de interface com guias:
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;
}Por padrão, o cursor aparece como uma seta, mas se você quiser que seja um mão apontando em vez disso, use isso:
details {
cursor: pointer;
}Comportamentos
Definir comportamentos é muito limitado, há realmente apenas uma coisa que você pode fazer e isso é tornar o texto revelado aberto por padrão.
Para iniciar o acordeão em seu estado aberto, adicione o Boolean aberto Atribua ao etiqueta, rótulo, palavra-chave:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Saiba Mais
Este é um acordeão HTML5 nativo para ocultar e revelar conteúdo. Bem legal, certo?
Quais atributos posso usar?
Os atributos abaixo podem ser usados para o etiqueta, rótulo, palavra-chave:
| Atributo | Valor | Resumo |
|---|---|---|
| aberto | aberto | O padrão é não aberto. |
| id | valor | Fornece um identificador exclusivo. |
| classe | nomes de classe | Atribui nomes de classe ao elemento. |
| estilo | Valores CSS | Atribui estilos CSS ao elemento. |
Então, quais são as limitações? Sempre tem uma pegadinha, não é?
Não há suporte para o Internet Explorer
Este acordeão somente HTML5 não funcionará em nenhuma versão do Internet Explorer. Se você precisar oferecer suporte ao IE11, precisará usar uma solução de fallback diferente usando JQuery. Todos os outros navegadores suportam e .
Sem animações ou transições personalizadas
Embora você possa modificar e estilizar a aparência (como mostrado acima), você não poderá fazer nenhuma animação ou transição de revelação de texto. Se você quiser fazer isso, precisará de outra solução de acordeão CSS/JSS.
Leitores de tela e acessibilidade
Isso é nativo HTML5 e ele *deveria* ser acessível, mas descobriu-se que o texto revelado real nem sempre é anunciado corretamente por um leitor de tela.
Referências:
