Acordeão exclusivo

Crie um acordeão exclusivo com vários elementos <details> que tenham o mesmo name.

Bramus

O acordeão

Um padrão de interface 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) o conteúdo.

Para implementar esse padrão na Web, você combina alguns elementos <details> e geralmente os agrupa visualmente para indicar que eles pertencem juntos.

Demonstração: acordeão com HTML e CSS.

O acordeão exclusivo

Compatibilidade com navegadores

• 120
• 120
• 130
• 17,2

Uma variação do padrão acordeã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 é possível adicionar um atributo name aos elementos <details>. Quando esse atributo é usado, vários elementos <details> que têm o mesmo valor de name formam um grupo semântico e se comportam como um acordeão exclusivo. Quando você abre um dos elementos <details> do grupo, o que foi 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>

Demonstração: acordeão exclusivo com HTML e CSS.

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 será criado.

Demonstração: vários acordeões exclusivos com HTML e CSS.

Os elementos <details> que fazem parte de um acordeão exclusivo não precisam necessariamente ser irmãos. Eles podem estar espalhados pelo documento. É o atributo name que as agrupa, não a ordem do DOM.

Use Polyfill, o acordeão exclusivo

Com o seguinte JavaScript, é possível aplicar o polyfill ao comportamento do accordion exclusivo. O código depende do evento toggle do elemento <details>.

Quando um elemento <details> com um name é aberto, o código encontra os outros elementos <details> abertos com o mesmo valor para o atributo name e os fecha.

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 disparam esse evento toggle. Nesses navegadores, o código do polyfill não faz nada. Em termos de aprimoramento progressivo, esse é um comportamento aceitável.