Crie um acordo exclusivo com vários elementos <details>
que tenham o mesmo name
.
O acordeão
Um padrão de IU comum na Web é um componente de acordeão. Este é um componente que consiste em vários widgets de divulgação que podem ser expandidos (ou recolhidos) individualmente para revelar (ou ocultar) seu conteúdo.
Para implementar esse padrão na Web, combine alguns elementos <details>
e os agrupe visualmente para indicar que eles se encaixam.
O acordeão exclusivo
Compatibilidade com navegadores
- 120
- 120
- x
- 17.2
Uma variação desse padrão é o acordeão exclusivo, em que apenas um dos widgets de divulgação pode ser aberto ao mesmo tempo.
Para fazer isso na Web, agora você pode adicionar um atributo name
aos elementos <details>
. Quando esse atributo é usado, vários elementos <details>
com o mesmo valor name
formam um grupo semântico e se comportam como um acordeão exclusivo. Quando você abrir um dos elementos <details>
do grupo, o elemento aberto anteriormente será fechado automaticamente.
<details name="learn-css">
<summary>Welcome to Learn CSS!</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Selectors</summary>
<p>…</p>
</details>
Uma página pode ter vários acordeões exclusivos. Sempre que você usar um novo valor name
em um elemento <details>
, um novo grupo lógico é criado.
Observe que os elementos <details>
que fazem parte de um acordeão exclusivo não precisam necessariamente ser irmãos. Elas podem estar espalhadas no documento. É o atributo name
que os agrupa, não a ordem do DOM.
Faça o polyfill do acordeão exclusivo
Com o JavaScript a seguir, é possível usar polyfill para o comportamento do acordeão exclusivo. O código depende do evento toggle
do elemento <details>
.
Quando um elemento <details>
com uma name
é aberto, o código encontra e fecha os outros elementos <details>
abertos com o mesmo valor para o atributo name
.
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
Algumas versões mais antigas dos navegadores não acionam esse evento toggle
. Nesses navegadores, o código do polyfill não faz nada. Em termos de aprimoramento progressivo, esse comportamento é aceitável.