Comment faire pour qu'un accordéon Bootstrap s'effondre en cliquant sur l'entête div?
dans un accordéon Bootstrap, au lieu d'exiger un clic sur le texte a , je veux le faire s'effondrer en cliquant n'importe où dans le panel-heading div.
J'utilise Bootstrap 3. Ainsi, au lieu de l'accordéon, c'est juste un panneau réductible. Une idée de la façon de faire le panneau entier cliquable?
5 réponses
Tout ce que vous devez faire est d'utiliser...
-
data-toggle="collapse" -
data-target="#ElementToExpandOnClick"
...sur l'élément que vous souhaitez, cliquez à l'effondrement de développer/effet.
de l'élément, Le data-toggle="collapse" sera l'élément déclencheur de l'effet.
L'attribut data-target indique l'élément qui se développera lorsque l'effet sera déclenché.
Vous pouvez aussi configurer le data-parent si vous voulez créer un effet accordéon au lieu d'un effet indépendant, par exemple:
-
data-parent="#accordion"
je voudrais aussi ajouter les CSS suivants aux éléments avec data-toggle="collapse" s'ils ne sont pas <a> tags, e.g.:
.panel-heading {
cursor: pointer;
}
Voici un jsfiddle avec le html modifié à partir de la Bootstrap 3 documentation .
une autre façon est de faire votre <a> remplir toute l'espace du panel-heading . Utilisez ce style pour le faire:
.panel-title a {
display: block;
padding: 10px 15px;
margin: -10px -15px;
}
Vérifiez cette démo ( http://jsfiddle.net/KbQyx / ).
puis quand vous cliquez sur le titre, vous cliquez en fait sur le <a> .
j'ai remarqué quelques petits défauts dans le jsfiddle de grim.
pour obtenir le pointeur de changer à une main pour l'ensemble du panneau utiliser:
.panel-heading {
cursor: pointer;
}
j'ai enlevé la balise <a> (un problème de style) et gardé data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." sur panel-heading tout au long.
j'ai ajouté une méthode CSS pour afficher chevron, en utilisant font-awesome.css dans mon jsfiddle:
la solution Simple serait d'enlever le rembourrage de .panel-heading et d'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.
en fait mon panneau avait ce Flèche état d'effondrement icône et j'ai essayé d'autres réponses dans ce post , mais la position de l'icône a changé, donc voici la solution avec l'icône flèche état d'effondrement .
ajouter ce Custom CSS
.panel-heading
{
cursor: pointer;
padding: 0;
}
a.accordion-toggle
{
display: block;
padding: 10px 15px;
}
crédit va à ce post answerer.
Espoir aide.