Eu quero falar sobre o maravilhoso elemento <details> e mostrar alguns exemplos de seu uso, do simples ao louco.
Você está familiarizado com o modelo de layout de um componente que pode alterar seu estado de visível para oculto:
.component { display:none; } .component.open { display:block; }
toggleButton.onclick = () => component.classList.toggle('open')
Agora esqueça. Há um item que pode fazer isso imediatamente. Conheça - <details>
O elemento HTML <details> é usado para revelar informações ocultas (adicionais).
Aplicação básica
Primeiro de tudo, vamos ver como esse elemento funciona:
Observe que o exemplo funciona sem nenhum estilo adicional ou JavaScript. Toda a funcionalidade está embutida no próprio navegador.
Por padrão, o texto visível depende das configurações de idioma do seu sistema, mas você pode alterá-lo adicionando o elemento <summary> aos <details> <summary> :
Para alterar o estado de um elemento em html, basta adicionar o atributo open
<details open> ... </details> <details> ... </details>
E, para gerenciar o estado usando JavaScript, é fornecida uma API especial:
const details = document.querySelector('details') details.open = true
Algumas palavras sobre acessibilidade
O elemento <summary> é <summary> . Ou seja, movendo-se pela página a partir do teclado, você chegará a esse elemento. Mas o conteúdo pode entrar em foco somente se <details> aberto, ou seja, o foco nunca incidirá sobre elementos invisíveis dentro de <details> .
Normalmente, os leitores de tela podem se dar bem com o uso padrão de <details> e <summary> . Existem algumas variações no anúncio, dependendo do programa e do navegador. Mais detalhes .
Exemplos de uso
Em seguida, repetirei aproximadamente alguns dos componentes da documentação do bootstrap, mas praticamente sem JavaScript.
Mude o marcador
A primeira coisa que você pode precisar é alterar a aparência do marcador. Isso é feito de maneira muito simples:
summary::-webkit-details-marker { }
Ou você pode ocultar o marcador padrão e implementar seu próprio
details summary::-webkit-details-marker { display: none } details > summary { list-style: none; } details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } details[open] summary:before { content: '\f146'; }
Recolher o componente
Tudo é simples aqui. A funcionalidade básica é a mesma. É apenas necessário alterar ligeiramente a aparência:
Componente acordeão
Vamos repetir o exemplo anterior, alterar ligeiramente a aparência de <summary> e obter o acordeão:
Mas, como você pode ver, um elemento não fecha quando outro é aberto. Para conseguir isso, precisamos de algumas linhas de JavaScript. Você precisa acompanhar a aparência do atributo aberto em um dos elementos <details> e excluí-lo do resto:
Componente popover
Essa implementação é muito parecida com o Collapse Component, com a diferença de que o conteúdo <details> possui posicionamento absoluto e se sobrepõe ao conteúdo.
Componente suspenso
Basicamente, esse é o mesmo componente popover. Somente a aparência é diferente.
O mesmo exemplo, apenas com um botão separado
Mas o componente suspenso tem mais uma diferença importante: ao clicar fora dele, ele deve estar oculto. Para implementar isso novamente, você precisará escrever algumas linhas de JavaScript.
Componente modal
E, finalmente, um exemplo de uma janela modal.
Em geral, <details> não <details> a melhor opção para implementar este componente. Há um elemento muito mais adequado - <dialog> , mas ele tem um suporte muito ruim ao navegador.
Referências
Posso usar os elementos Detalhes e Resumo
Elemento de detalhes MDN
Elemento de detalhes do W3C
UPD
Decidi adicionar outro exemplo do uso de <details> - navegação em vários níveis. Mais uma vez, quero chamar sua atenção para o fato de que o exemplo funciona sem nenhum JavaScript. E é muito mais inclusivo que o layout tradicional no <div> .