Como fazer um acordeão de Bootstrap entrar em colapso ao clicar no cabeçalho div?

167

Em um acordeão Bootstrap, em vez de exigir um clique no a texto, quero fazê-lo colapsar ao clicar em qualquer lugar dopanel-heading div.

Estou usando o Bootstrap 3. Então, em vez de acordeão, é apenas um painel desmontável. Alguma idéia de como fazer com que todo o painel seja clicável?

twitter-bootstrap  twitter-bootstrap-3 
— 9blue
fonte
Bem, você tem uma resposta. Mas, este link irá ajudá-lo a encontrar diferentes estilos de Bootstrap acordeão Menus designerslib.com/bootstrap-accordion-menu
— Karuppiah RK

Respostas:

292

Tudo que você precisa fazer é usar ...

  • data-toggle="collapse"
  • data-target="#ElementToExpandOnClick"

... no elemento em que você deseja clicar para acionar o efeito de recolher / expandir.

O elemento com data-toggle="collapse"será o elemento para acionar o efeito. O data-targetatributo indica o elemento que será expandido quando o efeito for acionado.

Opcionalmente, você pode definir data-parentse deseja criar um efeito acordeão em vez de dobrável independente, por exemplo:

  • data-parent="#accordion"

Eu também adicionaria o seguinte CSS aos elementos com data-toggle="collapse"se eles não forem <a>tags, por exemplo:

.panel-heading {
    cursor: pointer;
}

Aqui está um jsfiddle com o html modificado da documentação do Bootstrap 3 .

— sombrio
fonte
11
Parece que esse deve ser o código padrão / demo. Muito melhor do que usar <a>.
— dbn 16/01
esse método não funciona para o iphone. de acordo com a resposta para stackoverflow.com/questions/19866172/…, ele precisa ser <a> (uma vez que requer o href) para que possa ser recolhido no iphone ... alguma idéia?
— Minovsky
2
@minovsky Que tal esse JSFiddle atualizado: jsfiddle.net/Tcgyx/60 ? Infelizmente não tenho um iPhone para testar. Vou atualizar minha resposta se isso funcionar.
— sombria
@grim obrigado pelo violino! Nem sempre funciona, mas deixe-me experimentar mais e descobrir se posso produzir a falha de maneira confiável.
— Minovsky
1
@wutzebaer Você poderia ter role="tab button"e o navegador interpretará o primeiro da lista que ele entende (provavelmente tab). No entanto, não tenho certeza de qual dos dois é melhor. Tente encontrar o significado das tabe buttonpapéis e que lhe daria a resposta a respeito de que para escolher.
— sombria
67

Outra maneira é fazer com que você <a>preencha todo o espaço do panel-heading. Use este estilo para fazer isso:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

Verifique esta demonstração ( http://jsfiddle.net/KbQyx/ ).

Então, quando você clica no cabeçalho, na verdade está clicando no <a>.

— Calfzhou
fonte
Uma ótima solução para aqueles que usam a biblioteca GWTBootstrap.
— snowe
Não vi isso até implementar uma solução semelhante. As alterações de CSS foram as menos invasivas para mim. Eu escolhi a exibição: bloco embutido, largura: 100% e, como estamos usando Glyphicons para os nossos, o a: before tem margem esquerda: -10 px e margem direita: 10 px.
— Kirk Liemohn
1
Esse método não funciona em dispositivos iOS, o que normalmente é uma preocupação principal ao trabalhar com o Bootstrap.
— Jared
Jared, você pode elaborar? Por que esse trabalho não está limitado a determinadas versões do Safari?
— Dr. Jan-Philip Gehrcke
1
A vantagem desse método é que ele também funciona para a interface do usuário do Boostrap para AngularJS (onde você não deseja / precisa do JS do Bootstrap).
— Dr. Jan-Philip Gehrcke
12

Notei algumas falhas menores no violino de Grim.

Para fazer com que o ponteiro mude para uma mão durante todo o painel, use:

.panel-heading {
   cursor: pointer;
}

Eu removi a <a>tag (um problema de estilo) e continuei data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."por panel-headingtoda parte.

Adicionei um método CSS para exibir chevron, usando font-awesome.cssno meu jsfiddle:

http://jsfiddle.net/weaversnap/7FqsX/1/

— WeaverSnap
fonte
Isso quase funciona. As divisas aparecem de cabeça para baixo quando a página é carregada e se corrige após expandir e recolher um dos painéis.
— Connie DeCinko
@ConnieDeCinko Altere panel-headingpara panel-heading collapsedpara corrigir as divisas de cabeça para baixo.
— Amy Barrett
5

Aqui está uma solução para o Bootstrap4. Você só precisa colocar a card-headerclasse na atag. Isso é modificado a partir de um exemplo no W3Schools .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
Expandir snippet

— user2233706
fonte
4

A solução simples seria remover o preenchimento .panel-headinge adicionar a .panel-title a.

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

Essa solução é semelhante à postada acima por calfzhou , um pouco diferente.

— Rhythm Ruparelia
fonte
1

Na verdade, meu painel tinha esse ícone de seta de estado de recolhimento e tentei outras respostas neste post, mas a posição do ícone mudou, então aqui está a solução com o ícone de seta de estado de recolhimento .

Adicione este CSS personalizado

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

O crédito vai para este respondente de postagem.

A esperança ajuda.

— shaijut
fonte
0

Aqui está o exemplo de trabalho para o Bootstrap 4.3 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


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

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>
Expandir snippet

— Desenvolvedor
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.