Source

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 animará o heightvalor 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

Você pode usar um link com o hrefatributo ou um botão com o data-targetatributo. Em ambos os casos, o data-toggle="collapse"é necessário.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon oficia aute, non cupidatat skate dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua colocou um pássaro nele lula café de origem única nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cerveja artesanal labore wes anderson cred nesciunt sapiente e proident. Ad vegan excepteur açougueiro vice lomo. Leggings occaecat cerveja artesanal da fazenda à mesa, sintetizador estético de denim cru nesciunt você provavelmente não ouviu falar deles accusamus labore VHS sustentável.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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 WAI-ARIA Authoring Practices 1.1 - 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="".

Nome Modelo Predefinição Descrição
pai seletor | objeto jQuery | Elemento DOM falso Se pai for fornecido, todos os elementos recolhíveis sob o pai especificado serão fechados quando este item recolhível for mostrado. (semelhante ao comportamento tradicional do acordeão - isso depende da cardclasse). O atributo deve ser definido na área desmontável de destino.
alternar boleano verdadeiro Alterna o elemento recolhível na invocação

Métodos

Métodos e transições assíncronas

Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .

Consulte nossa documentação JavaScript para obter mais informações.

.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.

Tipo de evento Descrição
show.bs.collapse Este evento é acionado imediatamente quando o showmétodo de instância é chamado.
mostrado.bs.recolher Este evento é acionado quando um elemento de recolhimento se torna visível para o usuário (aguardará a conclusão das transições CSS).
hide.bs.collapse Este evento é disparado imediatamente quando o hidemétodo é chamado.
oculto.bs.recolher Este evento é acionado quando um elemento de recolhimento foi ocultado do usuário (aguardará a conclusão das transições CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})