CodeWiki

Criando um Acordeão com `<details>` e `<summary>` sem JavaScript

Neste tutorial, você aprenderá a criar um acordeão retrátil usando apenas HTML e CSS, sem a necessidade de JavaScript. A combinação das tags <details> e <summary> do HTML, junto com o atributo name, permite criar uma funcionalidade de acordeão de forma simples e eficiente.

Como Funciona?

<details>: Um elemento que pode ser expandido ou recolhido para mostrar ou ocultar conteúdo.
<summary>: Define o título ou o cabeçalho do elemento <details>.
Atributo name: Quando vários elementos <details> compartilham o mesmo valor no atributo name, apenas um pode estar aberto por vez, criando um comportamento de acordeão.

Estrutura HTML

Aqui está um exemplo básico de um acordeão com três seções:

<details name="acordeao">
    <summary>Seção 1</summary>
    <p>Conteúdo da Seção 1. Aqui você pode adicionar texto, imagens, links, etc.</p>
</details>

<details name="acordeao">
    <summary>Seção 2</summary>
    <p>Conteúdo da Seção 2. Mais informações podem ser colocadas aqui.</p>
</details>

<details name="acordeao">
    <summary>Seção 3</summary>
    <p>Conteúdo da Seção 3. Este é o último item do acordeão.</p>
</details>

Explicação do HTML

<details>:
- Cada seção do acordeão é um elemento <details>.
- O atributo name="acordeao" é usado para agrupar os elementos, garantindo que apenas um possa estar aberto por vez.
<summary>:
- Define o título clicável de cada seção.
- Quando clicado, o conteúdo associado é exibido ou ocultado.
Conteúdo:
- O conteúdo dentro de <details> (após o <summary>) é exibido ou ocultado conforme o estado do acordeão.

Estilizando com CSS

Você pode personalizar a aparência do acordeão usando CSS. Aqui está um exemplo básico:

/* Estilo básico para o acordeão */
details {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

/* Estilo do título (summary) */
summary {
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

/* Estilo quando o acordeão está aberto */
details[open] summary {
    background-color: #007BFF;
    color: white;
}

/* Estilo do conteúdo */
details p {
    margin-top: 10px;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

Explicação do CSS

details:
- Define o estilo do contêiner de cada seção do acordeão, com borda, margem e padding.
summary:
- Estiliza o título do acordeão, com fonte em negrito, cursor de ponteiro e fundo claro.
details[open] summary:
- Aplica um estilo diferente ao título quando o acordeão está aberto (usando o seletor [open]).
details p:
- Estiliza o conteúdo dentro do acordeão, com margem, padding e fundo claro.

Exemplo Completo

Aqui está o código completo para você testar:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acordeão com HTML e CSS</title>
    <style>
        /* Estilo básico para o acordeão */
        details {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
            padding: 10px;
        }

        /* Estilo do título (summary) */
        summary {
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

        /* Estilo quando o acordeão está aberto */
        details[open] summary {
            background-color: #007BFF;
            color: white;
        }

        /* Estilo do conteúdo */
        details p {
            margin-top: 10px;
            padding: 10px;
            background-color: #f1f1f1;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <details name="acordeao">
        <summary>Seção 1</summary>
        <p>Conteúdo da Seção 1. Aqui você pode adicionar texto, imagens, links, etc.</p>
    </details>

    <details name="acordeao">
        <summary>Seção 2</summary>
        <p>Conteúdo da Seção 2. Mais informações podem ser colocadas aqui.</p>
    </details>

    <details name="acordeao">
        <summary>Seção 3</summary>
        <p>Conteúdo da Seção 3. Este é o último item do acordeão.</p>
    </details>
</body>
</html>

Funcionalidades Adicionais

Ícones Personalizados:
- Adicione ícones (como setas) ao <summary> para indicar o estado do acordeão (aberto/fechado).
Transições Suaves:
- Use transition no CSS para animar a abertura e o fechamento do acordeão.
Acessibilidade:
- Certifique-se de que o acordeão seja acessível, usando atributos como aria-expanded e aria-controls (embora o <details> já seja acessível por padrão).

Conclusão

Usar <details> e <summary> é uma maneira simples e eficaz de criar acordeões sem a necessidade de JavaScript. Com um pouco de CSS, você pode personalizar a aparência e o comportamento para atender às necessidades do seu projeto.

Criando um Acordeão com <details> e <summary> sem JavaScript