Bootstrap - Réduire le plugin

Le plugin de réduction facilite la création de divisions de réduction de la page. Que vous l'utilisiez pour créer une navigation en accordéon ou des zones de contenu, il permet de nombreuses options de contenu.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du collapse.js. Cela nécessite également que le plugin Transition soit inclus dans votre version de Bootstrap. Sinon, comme mentionné dans le chapitre Présentation des plugins Bootstrap , vous pouvez inclure le fichier bootstrap.js ou le bootstrap.min.js minifié .

Vous pouvez utiliser le plugin de réduction -

To create collapsible groups or accordion. Cela peut être créé comme dans l'exemple ci-dessous -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse.Section 1
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
               nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse.Section 2
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-default">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse.Section 3
            </a>
         </h4>
      </div>
     
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
     
   </div>
</div>

data-toggle = "collapse" est ajouté au lien sur lequel vous cliquez pour développer ou réduire le composant.
href ou un data-targetL'attribut est ajouté au composant parent, dont la valeur est id du composant enfant.
data-parent L'attribut est ajouté pour créer l'effet de type accordéon.

Pour créer un simple pliable sans le balisage d'accordéon - Cela peut être créé comme dans l'exemple d'exemple ci-dessous -

<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
   simple collapsible
</button>

<div id = "demo" class = "collapse in">
   Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
      sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>

Comme vous pouvez le voir dans l'exemple, nous avons créé un simple composant pliable, contrairement à l'accordéon, nous n'avons pas ajouté l'attribut data-parent.

Usage

Le tableau suivant répertorie les classes que le plugin de réduction utilise pour gérer le gros du travail -

Sr.No.	Classe et description
1	.collapse Cache le contenu.
2	.collapse.in Affiche le contenu.
3	.collapsing Est ajouté au début de la transition et supprimé à la fin.

Vous pouvez utiliser le plugin de réduction de deux manières -

Via data attributes - Ajouter data-toggle = "collapse" et un data-targetà l'élément pour attribuer automatiquement le contrôle d'un élément réductible. ledata-targetL'attribut acceptera un sélecteur CSS auquel appliquer la réduction. Assurez-vous d'ajouter la classe.collapseà l'élément pliable. Si vous souhaitez qu'il s'ouvre par défaut, incluez la classe supplémentaire.in.

Pour ajouter une gestion de groupe de type accordéon à un contrôle réductible, ajoutez l'attribut data data-parent = "#selector".
Via JavaScript - La méthode de réduction peut être activée avec JavaScript comme indiqué ci-dessous -

$('.collapse').collapse()

Options

Certaines options peuvent être transmises via des attributs de données ou JavaScript sont répertoriées dans le tableau suivant -

Nom de l'option	Type / Valeur par défaut	Nom d'attribut de données	La description
parent	sélecteur Par défaut - faux	parent de données	Si selector est faux, alors tous les éléments réductibles sous le parent spécifié seront fermés (similaire au comportement d'accordéon traditionnel - cela dépend de la classe du groupe d'accordéon).
basculer	booléen Valeur par défaut - true	bascule de données	Active / désactive l'élément réductible lors de l'appel.

Méthodes

Voici une liste de quelques méthodes utiles qui sont utilisées avec des éléments réductibles.

Méthode	La description	Exemple
Options - .collapse (options)	Active votre contenu en tant qu'élément pliable. Accepte un objet d'options facultatif.	`$('#identifier').collapse({ toggle: false })`
Toggle - .collapse ('basculer')	Bascule un élément réductible sur affiché ou masqué.	`$('#identifier').collapse('toggle')`
Show - .collapse ('afficher')	Affiche un élément pliable.	`$('#identifier').collapse('show')`
Hide - .collapse ('cacher')	Masque un élément pliable.	`$('#identifier').collapse('hide')`

Exemple

L'exemple suivant montre l'utilisation des méthodes -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">
      
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>
      
      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>
      
      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
   
   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>
      
      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
   
   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>
      
      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt 
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
  
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

Événements

Le tableau suivant répertorie quelques événements pouvant être utilisés avec la fonctionnalité de réduction.

un événement	La description	Exemple
show.bs.collapse	Lancé après l'appel de la méthode show.	`$('#identifier').on('show.bs.collapse', function () { // do something })`
montré.bs.collapse	Cet événement est déclenché lorsqu'un élément de réduction a été rendu visible à l'utilisateur (attendra la fin des transitions CSS).	`$('#identifier').on('shown.bs.collapse', function () { // do something })`
hide.bs.collapse	Lancé lorsque la méthode d'instance hide a été appelée.	`$('#identifier').on('hide.bs.collapse', function () { // do something })`
hidden.bs.collapse	Cet événement est déclenché lorsqu'un élément de réduction a été caché à l'utilisateur (attendra que les transitions CSS se terminent).	`$('#identifier').on('hidden.bs.collapse', function () { // do something })`

Exemple

L'exemple suivant illustre l'utilisation des événements -

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">
   
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>
      
      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
      
   </div>
</div>

<script type = "text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>