Comment faire un Bootstrap accordéon effondrement en cliquant sur l'en-tête div?

Question

Dans un Bootstrap de l'accordéon, au lieu d'exiger un clic sur l' a de texte, je veux le faire s'effondrer lors d'un clic n'importe où dans l' panel-heading div.

Je suis en utilisant Bootstrap 3. Ainsi, au lieu de l'accordéon, c'est juste un panneau réductible. Une idée de comment faire l'intégralité du panneau cliquable?

Answer 1

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.

L'élément data-toggle="collapse" sera l'élément déclencheur de l'effet. L' data-target attribut indique l'élément qui permettra d'élargir lorsque l'effet est déclenché.

Optionnellement, vous pouvez définir l' data-parent si vous souhaitez créer un accordéon effet au lieu d'indépendant réductible, par exemple:

• data-parent="#accordion"

Je voudrais aussi ajouter le code CSS suivant pour les éléments avec de l' data-toggle="collapse" si elles ne sont pas <a> balises, par exemple:

.panel-heading {
    cursor: pointer;
}

Voici un jsfiddle avec le html modifié à partir du bootstrap 3 de la documentation.

Answer 2

Une autre façon est de rendre votre <a> plein de remplir tout l'espace de l' panel-heading. Utilisez ce style pour le faire:

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

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

Puis, quand vous en cliquant sur le titre, vous êtes en fait en cliquant sur l' <a>.

Answer 3

J'ai remarqué un couple de petits défauts dans le grim's jsfiddle.

Pour obtenir le pointeur pour modifier d'un coup de main pour l'ensemble de l'utilisation du panneau de contrôle:

.panel-heading {
   cursor: pointer;
}

J'ai supprimé l' <a> de la balise (un style) et gardé data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." sur panel-heading tout au long de.

J'ai ajouté une méthode CSS pour l'affichage de chevron, à l'aide de font-awesome.css dans mon jsfiddle:

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