O Bootstrap oferece componentes interativos que melhoram a experiência do usuário em interfaces web. Um desses componentes é o "Collapse", que permite ocultar ou exibir conteúdo dinamicamente. Isso é útil para economizar espaço na tela, como em listas de perguntas frequentes ou seções de detalhes.

A implementação básica do componente Collapse envolve a criação de um grupo de itens, onde cada item possui um cabeçalho clicável que controla a visibilidade de um painel de conteúdo associado. O Bootstrap utiliza atributos de dados HTML para gerenciar essa interação.

Um exemplo comum é a criação de um acordeão, onde apenas um painel pode estar aberto por vez. Para isso, os elementos colapsáveis são agrupados sob um container com o atributo data-parent apontando para um identificador comum.

Estrutura HTML do Acordeão

O HTML a seguir demonstra a estrutura de um acordeão Bootstrap:

<div class="panel-group" id="meuAcordeao" role="tablist" aria-multiselectable="true">
 <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="cabecalhoUm">
     <h4 class="panel-title">
       <a role="button" data-toggle="collapse" data-parent="#meuAcordeao" href="#conteudoUm" aria-expanded="true" aria-controls="conteudoUm">
         Item Colapsável 1
       </a>
     </h4>
   </div>
   <div id="conteudoUm" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="cabecalhoUm">
     <div class="panel-body">
       Conteúdo do primeiro item. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </div>
   </div>
 </div>
 <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="cabecalhoDois">
     <h4 class="panel-title">
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#meuAcordeao" href="#conteudoDois" aria-expanded="false" aria-controls="conteudoDois">
         Item Colapsável 2
       </a>
     </h4>
   </div>
   <div id="conteudoDois" class="panel-collapse collapse" role="tabpanel" aria-labelledby="cabecalhoDois">
     <div class="panel-body">
       Conteúdo do segundo item. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div>
   </div>
 </div>
</div>
   

Explicação dos Atributos

• data-toggle="collapse": Ativa a funcionalidade de colapso/expansão.
• data-parent="#meuAcordeao": Garante que apenas um item do acordeão esteja aberto por vez, referenciando o ID do container pai.
• href="#conteudoUm": Link para o ID do elemento que será exibido ou ocultado.
• aria-expanded: Indica se o painel está expandido (true) ou recolhido (false), importante para acessibilidade.
• in class: Aplica esta classe ao painel de conteúdo para que ele seja visível por padrão na carga inicial da página.

Exemplo de Uso em Navegação

É possível integrar o componente Collapse em elementos de navegação, como barras de navegação responsivas. Ao redimensionar a tela para tamanhos menores, o menu de navegação pode se transformar em um botão "toggle" que, ao ser clicado, revela o conteúdo do menu.

A adaptação de um menu de navegação em Bootstrap para dispositivos móveis frequentemente utiliza o componente Collapse. O botão de toggle (geralmente com classes navbar-toggle) aciona a exibição do menu principal (container com collapse navbar-collapse).

Considere a seguinte esturtura simplificada para um menu responsivo:

<nav class="navbar navbar-default">
 <div class="container-fluid">
   <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuNavPrincipal" aria-expanded="false">
       <span class="sr-only">Navegação</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand" href="#">Logo</a>
   </div>

   <div class="collapse navbar-collapse" id="menuNavPrincipal">
     <ul class="nav navbar-nav">
       <li><a href="#">Link 1</a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
           Dropdown <span class="caret"></span>
         </a>
         <ul class="dropdown-menu">
           <li><a href="#">Sublink 1</a></li>
           <li><a href="#">Sublink 2</a></li>
         </ul>
       </li>
     </ul>
   </div>
 </div>
</nav>
   

Neste exemplo, o botão com data-toggle="collapse" e data-target="#menuNavPrincipal" controla a visibilidade do container #menuNavPrincipal, permitindo que o menu seja acessível em dispositivos móveis através de um botão compactado.