English 中文 العربية 日本語 Português

Bootstrap: Accordion e Painéis de Colapso

Última atualização: 2026-08-26

1. Introdução à Lição

(1) Pré-requisitos

(2) 🎯 O que você vai aprender

(3) O Problema

Bob está construindo uma página de FAQ com 8 perguntas comuns. Ele quer implementar isso usando um Accordion: quando o usuário clica em uma pergunta, a resposta se expande, e clicar em outra recolhe automaticamente a anterior, proporcionando uma experiência suave e economizando espaço na página.

(4) A Solução

O componente Collapse é usado para exibir grandes quantidades de conteúdo em espaço limitado. O usuário clica em um título para revelar detalhes e clica novamente para ocultá-los. Accordion é uma forma especial do componente Collapse: apenas um painel permanece aberto por vez.

Entendimento: Um accordion é como um conjunto de gavetas recolhíveis—você só pode puxar uma gaveta por vez. Collapse é uma gaveta única; Accordion é várias gavetas vinculadas.

(5) O Benefício

Usar um accordion permite organizar grandes quantidades de conteúdo em espaço limitado, mantendo a página limpa e melhorando a experiência de navegação.

2. Painel de Colapso Único

O componente Collapse mais básico:

HTML 
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Alternar conteúdo
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Este conteúdo está oculto por padrão. Clique no botão para mostrar ou ocultá-lo.
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Painel de Colapso Básico

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Colapso</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <p>
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#singleCollapse" role="button">
        Alternar com link
      </a>
      <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#singleCollapse">
        Alternar com botão
      </button>
    </p>
    <div class="collapse" id="singleCollapse">
      <div class="card card-body">
        Este conteúdo pode ser alternado usando o link ou o botão.
      </div>
    </div>

    <hr>

    <p>
      <button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
        Alternar ambos
      </button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse1">
          <div class="card card-body">Primeiro painel recolhível.</div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse2">
          <div class="card card-body">Segundo painel recolhível.</div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Atributos-chave do Collapse

Atributo/Classe Descrição
data-bs-toggle="collapse" Declara o gatilho
data-bs-target="#id" Especifica o elemento a recolher
class="collapse" Oculto por padrão
class="collapse show" Mostrado por padrão (estado expandido)
data-bs-parent="#accordion" Controle vinculado (usado para Accordion)

3. Accordion

Accordion é uma combinação vinculada de múltiplos painéis de colapso, onde no máximo um pode ser expandido por vez.

HTML 
<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq1">
        Como instalo o Bootstrap?
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse show"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Adicione o link CDN ao cabeçalho do seu HTML.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq2">
        O Bootstrap precisa de jQuery?
      </button>
    </h2>
    <div id="faq2" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        Não, o Bootstrap 5 usa JavaScript puro (vanilla).
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#faq3">
        O que é o sistema de grade?
      </button>
    </h2>
    <div id="faq3" class="accordion-collapse collapse"
         data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        O Bootstrap usa um sistema de grade flexbox de 12 colunas.
      </div>
    </div>
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Estrutura do Accordion

Elemento Classe Descrição
Contêiner accordion Declara o grupo de accordion
Item accordion-item Um painel de colapso único
Cabeçalho accordion-header Contêiner da linha de cabeçalho
Gatilho accordion-button Botão de título clicável
Área de Conteúdo accordion-collapse collapse Conteúdo recolhível
Corpo do Conteúdo accordion-body O texto realmente exibido

(2) Mecanismo-chave

HTML 
data-bs-parent="#faqAccordion"  // Vinculado (apenas um aberto por vez)
class="accordion-collapse collapse show"  // Expandido por padrão
class="accordion-button collapsed"  // Estado recolhido
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

4. Variações do Accordion

HTML 
<!-- Flush (sem borda externa) -->
<div class="accordion accordion-flush">
  <div class="accordion-item">...</div>
</div>

<!-- Modo sempre-aberto (remover data-bs-parent) -->
<div class="accordion" id="multiOpen">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#panel1">
        Painel 1
      </button>
    </h2>
    <!-- Sem data-bs-parent — independente -->
    <div id="panel1" class="accordion-collapse collapse show">
      <div class="accordion-body">Este painel permanece aberto quando o Painel 2 é aberto.</div>
    </div>
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

5. Mais Exemplos de Painéis de Colapso

▶ Exemplo: Accordion de FAQ (Sem Borda)

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion de FAQ</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="accordion accordion-flush" id="faqAccordion">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
            O que é o Bootstrap?
          </button>
        </h2>
        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Bootstrap é um framework front-end gratuito para construir sites responsivos com HTML, CSS e JavaScript.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
            Preciso saber JavaScript?
          </button>
        </h2>
        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Componentes básicos do Bootstrap funcionam sem JS. Componentes interativos como modais e carrosséis precisam do Bootstrap JS.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
            O Bootstrap é gratuito?
          </button>
        </h2>
        <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">Sim, o Bootstrap é completamente gratuito e de código aberto sob a licença MIT.</div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
            O que é o sistema de grade?
          </button>
        </h2>
        <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">A grade do Bootstrap usa 12 colunas com breakpoints para layouts responsivos. Classes como col-md-6 criam colunas que se ajustam em diferentes tamanhos de tela.</div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Modo Sempre-Aberto (Painéis Independentes)

HTML 
<div class="accordion" id="independentAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelA">
        Habilidades e Experiência
      </button>
    </h2>
    <div id="panelA" class="accordion-collapse collapse show">
      <div class="accordion-body">HTML, CSS, JavaScript, Bootstrap, React</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelB">
        Experiência de Trabalho
      </button>
    </h2>
    <div id="panelB" class="accordion-collapse collapse show">
      <div class="accordion-body">Desenvolvedor Sênior na TechCorp (2020-presente), Desenvolvedor Front-end na WebStudio (2018-2020)</div>
    </div>
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Componentes de Colapso Independentes

HTML 
<div class="container py-4">
  <div class="d-flex gap-2 mb-3">
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo1">
      Alternar Primeiro
    </button>
    <button class="btn btn-outline-success" data-bs-toggle="collapse" data-bs-target="#demo2">
      Alternar Segundo
    </button>
    <button class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target=".multi-demo">
      Alternar Todos
    </button>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="collapse multi-demo show" id="demo1">
        <div class="card card-body">
          Primeiro painel — visível por padrão.
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="collapse multi-demo" id="demo2">
        <div class="card card-body">
          Segundo painel — inicialmente oculto.
        </div>
      </div>
    </div>
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Painel de Colapso dentro de um Card

HTML 
<div class="card" style="max-width: 500px;">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">Resumo do Pedido</h5>
  </div>
  <div class="card-body">
    <p class="card-text">Seu pedido contém 3 itens.</p>
    <p>
      <a class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" href="#orderDetails">
        Ver Detalhes
      </a>
    </p>
    <div class="collapse" id="orderDetails">
      <div class="border rounded p-3 bg-light">
        <div class="d-flex justify-content-between mb-2">
          <span>Mouse Sem Fio</span><span class="text-muted">$29,99</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span>Hub USB-C</span><span class="text-muted">$39,99</span>
        </div>
        <div class="d-flex justify-content-between">
          <span>Mousepad</span><span class="text-muted">$12,99</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between fw-bold">
          <span>Total</span><span>$82,97</span>
        </div>
      </div>
    </div>
  </div>
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Como Collapse/Accordion Funciona

100% 
flowchart TD
    A[Gatilho<br/>data-bs-toggle=collapse] --> B[data-bs-target=#id]
    B --> C[Elemento Alvo<br/>class=collapse]
    C --> D{Estado Inicial}
    D -->|Sem show| E[Oculto por Padrão]
    D -->|Tem show| F[Expandido por Padrão]
    C --> G{Tem data-bs-parent?}
    G -->|Sim| H[Modo Vinculado<br/>Apenas um aberto por vez]
    G -->|Não| I[Modo Independente<br/>Alternar individualmente]
    H --> J[Accordion]
    I --> K[Collapse Comum]

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Classe de Colapso Efeito Descrição
collapse Oculto por padrão Não visível ao carregar a página
collapse show Expandido por padrão Visível ao carregar a página
collapsing Em transição Adicionado automaticamente durante a animação
accordion-collapse Específico do accordion Usado dentro de um accordion
Atributo data-* Valor Propósito
data-bs-toggle collapse Declara um gatilho de colapso
data-bs-target #id / .class Especifica o elemento controlado
data-bs-parent #accordionId Restrição vinculada (accordion)
href #id Gatilho do tipo link
Variação do Accordion Classe Característica Cenário
Básico accordion Borda padrão Uso geral
Sem borda accordion-flush Sem borda/arredondamento externo FAQ, barras laterais
Sempre-aberto Remover data-bs-parent Múltiplos painéis abertos simultaneamente Painéis de configurações
Aninhado em Card Colocar dentro de card-body Layout compacto Detalhes do pedido

❓ Perguntas Frequentes

P: Qual a diferença entre Accordion e Collapse? R: Collapse é o componente base—ele controla a expansão/recolhimento de um único elemento. Accordion é uma aplicação combinada do Collapse—múltiplos painéis são vinculados via data-bs-parent, permitindo que apenas um seja expandido por vez.

P: O ícone de seta não gira ao clicar no título do Accordion. Por quê? R: Isso provavelmente ocorre porque o Bootstrap JS não foi carregado corretamente. Certifique-se de ter incluído bootstrap.bundle.min.js. Verifique o console do navegador para erros de JS.

P: Como faço para que o primeiro painel de um accordion seja expandido por padrão sem o comportamento de auto-recolhimento? R: Basta remover o atributo data-bs-parent. Assim, cada painel funciona independentemente e não afeta os outros.

P: Posso colocar caixas de seleção ou campos de entrada dentro de um Accordion? R: Sim. Você pode colocar qualquer HTML dentro de accordion-body, incluindo controles de formulário. Tome cuidado para não acionar acidentalmente a expansão/recolhimento do accordion ao clicar nos inputs. Você pode usar event.stopPropagation() para evitar a propagação.

P: O Accordion suporta navegação por teclado? R: Sim. O accordion do Bootstrap implementa interação por teclado: Tab alterna o foco entre painéis, Enter/Espaço expande o painel atual, e pressionar Enter/Espaço novamente em um painel expandido o recolhe.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um accordion de FAQ: pelo menos 5 perguntas comuns, a primeira expandida por padrão, as demais recolhidas, usando o estilo sem borda accordion-flush.
  2. ⭐⭐ Implemente as respostas do dever de casa usando um Accordion—cada pergunta como um painel, clique para revelar a resposta.
  3. ⭐⭐⭐ Crie um accordion de navegação na barra lateral: inclua Painel (sem sub-itens), Produtos (3 sub-itens), Pedidos (2 sub-itens), Configurações (4 sub-itens).

Lição Anterior: Componentes de Alerta · Próxima Lição: Ícones do Bootstrap

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%