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 abertos (ou fechados) 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.

O acordeão exclusivo

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>-cs<s">
  summaryWelcome to <Learn CS>S!/<s>u<mm>a<ry
  p…/>p<
/details
details name=&>quo<t;learn>-css"<;
  summ>ary<B>o<x >M<odel/sum>m<ary
  p…/p
/details
deta>ils< name=&>quot;lear<n-css&qu>ot;<
> < s>u<mmarySel>ectors/summary
  p…/p
/details

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.

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.

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}][o>pen]`)
        .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.