Comment faire s'effondrer un accordéon Bootstrap en cliquant sur le div d'en-tête?

167

Dans un accordéon Bootstrap, au lieu de nécessiter un clic sur le atexte, je veux le faire réduire en cliquant n'importe où dans le panel-headingdiv.

J'utilise Bootstrap 3. Donc, au lieu d'accordéon, c'est juste un panneau pliable. Une idée comment rendre le panneau entier cliquable?

twitter-bootstrap twitter-bootstrap-3 9 bleu
la source
Eh bien, vous avez une réponse. Mais, ce lien vous aidera à trouver différents styles de menus pour accordéon Bootstrap designerslib.com/bootstrap-accordion-menu
Karuppiah RK

Réponses:

292

Il ne vous reste plus qu'à utiliser ...

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

... sur l'élément sur lequel vous souhaitez cliquer pour déclencher l'effet de réduction / expansion.

L'élément avec data-toggle="collapse"sera l'élément qui déclenchera l'effet. L' data-targetattribut indique l'élément qui se développera lorsque l'effet est déclenché.

En option, vous pouvez définir data-parentsi vous souhaitez créer un effet d'accordéon au lieu d'un effet pliable indépendant, par exemple:

  • data-parent="#accordion"

J'ajouterais également le CSS suivant aux éléments avec data-toggle="collapse"s'ils ne sont pas des <a>balises, par exemple:

.panel-heading {
    cursor: pointer;
}

Voici un jsfiddle avec le html modifié de la documentation Bootstrap 3 .

sinistre
la source
11
On dirait que cela devrait être le code par défaut / démo. Bien plus agréable que d'utiliser <a>.
dbn le
cette méthode ne fonctionne pas pour l'iphone. selon la réponse à stackoverflow.com/questions/19866172/ ... il doit être <a> (car il nécessite le href) pour qu'il soit pliable sur iphone ... des idées?
minovsky
2
@minovsky Que diriez-vous de cette mise à jour de JSFiddle: jsfiddle.net/Tcgyx/60 ? Malheureusement, je n'ai pas d'iPhone à tester. Je mettrai à jour ma réponse si cela fonctionne.
sinistre
@grim merci pour le violon! Cela ne fonctionne pas toujours, mais laissez-moi expérimenter davantage et déterminer si je peux produire l'échec de manière fiable.
minovsky
1
@wutzebaer Vous auriez pu role="tab button"et le navigateur interprétera le premier de la liste qu'il comprend (très probablement tab). Cependant, je ne sais pas lequel des deux est le meilleur. Essayez de trouver le sens des tabet des buttonrôles et cela vous donnera la réponse à laquelle choisir.
sombre du
67

Une autre façon est de <a>remplir complètement tout l'espace du fichier panel-heading. Utilisez ce style pour ce faire:

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

Consultez cette démo ( http://jsfiddle.net/KbQyx/ ).

Ensuite, lorsque vous cliquez sur l'en-tête, vous cliquez en fait sur le <a>.

Calfzhou
la source
Ah une excellente solution pour ceux d'entre nous qui utilisent la bibliothèque GWTBootstrap.
neige
Je n'ai pas vu cela jusqu'à ce que j'ai mis en œuvre une solution similaire. Les changements CSS ont été le changement le moins invasif pour moi. J'ai choisi display: inline-block, width: 100% et puisque nous utilisons Glyphicons pour le nôtre, le a: before a margin-left: -10px et margin-right: 10px.
Kirk Liemohn
1
Cette méthode ne fonctionne pas sur les appareils iOS, ce qui est généralement une préoccupation majeure lorsque vous travaillez avec Bootstrap.
Jared
Jared, pouvez-vous élaborer? Pourquoi cela ne fonctionne-t-il pas est-il limité à certaines versions de Safari?
Dr.Jan-Philip Gehrcke
1
L'avantage de cette méthode est qu'elle fonctionne également pour l'interface utilisateur Boostrap pour AngularJS (où vous ne voulez / n'avez pas besoin du JS de Bootstrap).
Dr.Jan-Philip Gehrcke
12

J'ai remarqué quelques défauts mineurs dans jsfiddle de grim.

Pour que le pointeur se transforme en main pour l'ensemble du panneau, utilisez:

.panel-heading {
   cursor: pointer;
}

J'ai supprimé la <a>balise (un problème de style) et j'ai continué tout data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."du panel-headinglong.

J'ai ajouté une méthode CSS pour afficher le chevron, en utilisant font-awesome.cssdans mon jsfiddle:

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

WeaverSnap
la source
Cela fonctionne presque. Les chevrons apparaissent à l'envers lorsque la page se charge et se corrigent après avoir développé et réduit l'un des panneaux.
Connie DeCinko
@ConnieDeCinko Changez panel-headingpour panel-heading collapsedpour fixer les chevrons à l'envers.
Amy Barrett
5

Voici une solution pour Bootstrap4. Il vous suffit de mettre la card-headerclasse dans la abalise. Ceci est une modification d'un exemple dans 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>
Développer l'extrait

user2233706
la source
4

Une solution simple serait de supprimer le rembourrage .panel-headinget d'en ajouter .panel-title a.

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

Cette solution est similaire à celle ci-dessus publiée par calfzhou , légèrement différente.

Rythme Ruparelia
la source
1

En fait, mon panneau avait cette icône de flèche d'état de réduction et j'ai essayé d'autres réponses dans cet article, mais la position de l'icône a changé, voici donc la solution avec l'icône de flèche d'état de réduction .

Ajoutez ce CSS personnalisé

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

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

Le crédit va à ce post-répondeur.

L'espoir aide.

shaijut
la source
0

Voici l'exemple de travail pour 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>
Développer l'extrait

Développeur
la source