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. Esse é um componente que consiste em vários widgets de exibiçã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 os agrupa visualmente para indicar que eles pertencem ao mesmo grupo.

Demo: acordeão com HTML e CSS.

O acordeão exclusivo

Compatibilidade com navegadores

• 120
• 120
• 130
• 17.2

Uma variação do padrão de acordeão é o acordeão exclusivo, em que apenas um dos widgets de abertura pode ser aberto ao mesmo tempo.

Para criar um acordeão exclusivo na Web, adicione 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ê abre um dos elementos <details> do grupo, o elemento aberto anteriormente é 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ê usa um novo valor name em um elemento <details>, um novo grupo lógico é 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 ser irmãos. Elas podem estar espalhadas pelo documento. É o atributo name que os agrupa, não a ordem do DOM.

Atenção: antes de usar acordeões exclusivos, considere se eles são úteis ou prejudiciais aos usuários. Embora o uso de um acordeão exclusivo reduza a quantidade de espaço visual ocupado pelo conteúdo, os usuários podem ter que abrir muitos itens para encontrar informações. Isso pode frustrar os usuários que querem conferir vários itens ao mesmo tempo.

Preencher o acordeão exclusivo

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