Colapso

Alterne a visibilidade do conteúdo em seu projeto com algumas classes e nossos plugins JavaScript.

Como funciona

O plug-in JavaScript de recolhimento é usado para mostrar e ocultar conteúdo. Botões ou âncoras são usados ​​como gatilhos que são mapeados para elementos específicos que você alterna. Recolher um elemento irá animar o heightseu valor atual para 0. Dado como o CSS lida com animações, você não pode usar paddingem um .collapseelemento. Em vez disso, use a classe como um elemento de encapsulamento independente.

Exemplo

Clique nos botões abaixo para mostrar e ocultar outro elemento por meio de alterações de classe:

• .collapseesconde conteúdo
• .collapsingé aplicado durante as transições
• .collapse.showmostra o conteúdo

Geralmente, recomendamos usar um botão com o data-targetatributo. Embora não seja recomendado do ponto de vista semântico, você também pode usar um link com o hrefatributo (e um role="button"). Em ambos os casos, o data-toggle="collapse"é necessário.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Horizontal

O plug-in de recolhimento também suporta o recolhimento horizontal. Adicione a .widthclasse modificadora para fazer a transição widthem vez de heighte defina a widthno elemento filho imediato. Sinta-se à vontade para escrever seu próprio Sass personalizado, usar estilos inline ou usar nossos utilitários de largura .

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Vários destinos

Um <button>ou <a>pode mostrar e ocultar vários elementos referenciando-os com um seletor JQuery em seu atributo hrefou . data-targetMúltiplos <button>ou <a>podem mostrar e ocultar um elemento se cada um deles o referenciar com seu atributo hrefoudata-target

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Exemplo de acordeão

Usando o componente de cartão , você pode estender o comportamento de recolhimento padrão para criar um acordeão. Para obter adequadamente o estilo de acordeão, certifique-se de usar .accordioncomo invólucro.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

Acessibilidade

Certifique-se de adicionar aria-expandedao elemento de controle. Esse atributo transmite explicitamente o estado atual do elemento desmontável vinculado ao controle para leitores de tela e tecnologias assistivas semelhantes. Se o elemento recolhível for fechado por padrão, o atributo no elemento de controle deverá ter um valor de aria-expanded="false". Se você definiu o elemento recolhível para ser aberto por padrão usando a showclasse, defina aria-expanded="true"no controle. O plug-in alternará automaticamente esse atributo no controle com base no fato de o elemento recolhível ter sido aberto ou fechado (via JavaScript ou porque o usuário acionou outro elemento de controle também vinculado ao mesmo elemento recolhível). Se o elemento HTML do elemento de controle não for um botão (por exemplo, um <a>ou <div>), o atributorole="button"deve ser adicionado ao elemento.

Se o seu elemento de controle tem como alvo um único elemento recolhível – ou seja, o data-targetatributo está apontando para um idseletor – você deve adicionar o aria-controlsatributo ao elemento de controle, contendo o iddo elemento recolhível. Leitores de tela modernos e tecnologias assistivas semelhantes fazem uso desse atributo para fornecer aos usuários atalhos adicionais para navegar diretamente para o próprio elemento recolhível.

Observe que a implementação atual do Bootstrap não cobre as várias interações de teclado descritas no padrão de acordeão do ARIA Authoring Practices Guide - você precisará incluí-las você mesmo com JavaScript personalizado.

Uso

O plugin de colapso utiliza algumas classes para lidar com o trabalho pesado:

• .collapseesconde o conteúdo
• .collapse.showmostra o conteúdo
• .collapsingé adicionado quando a transição começa e removido quando termina

Essas classes podem ser encontradas em _transitions.scss.

Por atributos de dados

Basta adicionar data-toggle="collapse"e data-targeta ao elemento para atribuir automaticamente o controle de um ou mais elementos recolhíveis. O data-targetatributo aceita um seletor CSS ao qual aplicar o recolhimento. Certifique-se de adicionar a classe collapseao elemento recolhível. Se você quiser que ele seja aberto por padrão, adicione a classe adicional show.

Para adicionar gerenciamento de grupo tipo acordeão a uma área recolhível, adicione o atributo data data-parent="#selector". Consulte a demonstração para ver isso em ação.

Por JavaScript

Ative manualmente com:

$('.collapse').collapse()

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-parent="".

Métodos

.collapse(options)

Ativa seu conteúdo como um elemento recolhível. Aceita opções opcionais object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Alterna um elemento recolhível para mostrado ou oculto. Retorna ao chamador antes que o elemento recolhível tenha realmente sido mostrado ou ocultado (ou seja, antes que o evento shown.bs.collapseor hidden.bs.collapseocorra).

.collapse('show')

Mostra um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido realmente mostrado (ou seja, antes que o shown.bs.collapseevento ocorra).

.collapse('hide')

Oculta um elemento recolhível. Retorna ao chamador antes que o elemento colapsável tenha sido ocultado (ou seja, antes que o hidden.bs.collapseevento ocorra).

.collapse('dispose')

Destrói o colapso de um elemento.

Eventos

A classe de recolhimento do Bootstrap expõe alguns eventos para conexão com a funcionalidade de recolhimento.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})