Modifiez le plug-in de compression Twitter Bootstrap pour conserver les accordéons ouverts

Question

Je suis en train de modifier le fichier d'amorce de l'effondrement plugin pour me permettre de spécifier si en cliquant sur un accordéon (pour l'ouvrir), doit fermer automatiquement les autres points à l'accordéon (si plus d'un élément dans l'accordéon peuvent être ouvertes en même temps)

Je veux créer un nouvel attribut de données sur l'accordéon, quelque chose comme data-collapse-type="auto|manual"

Le bootstrap, jQuery plugins sont un peu avancée pour mon niveau de compétence. La partie la plus pertinente de ce que j'ai besoin de jouer avec semble être sur la ligne 52, actives.collapse('hide'). Je ne veux pas que cela se produise si " data-effondrement-type="manuel" est défini (en omettant l'attribut ou le paramètre auto doit garder le comportement par défaut).

J'ai créé un jsfiddle où j'ai été experiementing.

Quelqu'un peut-il m'aider à obtenir sur la bonne voie avec cette?

Answer 1

En fait, vous n'avez pas besoin de modifier le code. Lisez la déclaration suivante de près de twitterbootstrap site

Seulement ajouter de la data-toggle="collapse" et de données cible à l'élément pour attribuer automatiquement le contrôle d'un élément pliable. Les données de l'attribut cible accepte un sélecteur css pour appliquer l'effondrement. Assurez-vous d'ajouter la classe effondrement de la grille de l'élément. Si vous souhaitez d'ouverture par défaut, ajouter la classe.

Donc, au lieu d'utiliser data-parent='#idofAccordion', utilisez data-target='#idofCollapseItem'.

Il devrait fonctionner parfaitement.

Voici la démo sur plunker

Answer 2

J'ai fourchu et mis à jour votre violon.

Il suffit d’aller à la fonction .show, j’ai aussi écrit les commentaires.

http://jsfiddle.net/2Rnpz/

Answer 3

La technique permettant d’avoir un seul accordéon ouvert à la fois (c’est-à-dire de réduire le reste) consiste à placer data-parent = "# accordéon" data-target = "# collapseOne".

 <a class="accordion-toggle" data-toggle="collapse" href="#"
    data-parent="#accordion" data-target="#collapseOne">
  Item #1
</a>
 

Vous pouvez le regarder dans plunker: http://plnkr.co/edit/56iXtA?p=preview