Afficher et masquer du contenu avec l’élément Collapse

Aujourd’hui nous sommes Mardi et comme tout les mardi qui se respectent, nous allons en découvrir un peu plus sur les plugins jQuery qui composent Bootstrap. Nous verrons comment afficher ou masque du contenu avec l’élément Collapse et son plugin JavaScript collapse.js.   Présentation Comme vous le savez, Bootstrap intègre une libraire JavaScript composée de […]

Posté le par Benoît Philibert|5129 vues

Aujourd’hui nous sommes Mardi et comme tout les mardi qui se respectent, nous allons en découvrir un peu plus sur les plugins jQuery qui composent Bootstrap. Nous verrons comment afficher ou masque du contenu avec l’élément Collapse et son plugin JavaScript collapse.js.

 

Présentation

Comme vous le savez, Bootstrap intègre une libraire JavaScript composée de plugin jQuery. Cela permet aux intégrateurs de pousser l’expérience au niveau supérieur. En effet, nous avons tout à porté de main pour construire notre site internet de façon dynamique et responsive.

Le plugin collapse.js permet d’afficher ou masquer du contenu au clique. Le framework met à notre disposition le fichier source sur Github.

Lorsque vous téléchargez le dossier traditionnel (le fichier minimisé et non le dossier source destiné à une utilisation avec LESS CSS), les différents plugins jQuery sont regroupés sous un fichier commun. Vous n’aurez donc pas accès au fichier source collapse.js (cependant aucune modification importante est à relevée concernant l’utilisation du plugin avec tel ou tel dossier source).

 

Structure HTML

Commençons par intégrer la structure de base requise au bon fonctionnement du Collapse.

Dans un premier temps, il est important de noter que le Collapse s’affiche par le clique de l’utilisateur. Nous avons de ce fait deux moyens naturels permettant d’afficher ou masquer le contenu : une balise de lien <a> ou une balise <button> (en théorie).

Balises <a> et <button> :

<a class="btn btn-primary" href="#">Balise a</a>
<button class="btn btn-primary" type="button">Balise button</button>

Comme vous devez vous en douter, la balise <button> ne possède pas d’attribut href permettant au lien <a> de relier le Collapse. Il dispose d’un data attribut HTML5 data-target afin de cibler la source.

Ajoutons le Collapse :

<!-- les boutons d'actions -->
<a class="btn btn-primary" href="#">Balise a</a>
<button class="btn btn-primary" type="button">Balise button</button>

<!-- le contenu masqué -->

<section id="MonCollapse" class="collapse">
<div class="well">Je suis du texte dans un élément de classe <em>well</em>.</div>
</section>

À présent, nous allons relier grace au href et au data-target les boutons au Collapse. On peut noter que le Collapse possède un identifiant MonCollapse afin de faciliter le ciblage de l’élément masqué par les boutons d’actions.

<!-- les boutons d'actions -->
<a class="btn btn-primary" href="#MonCollapse">Balise a</a>
<button class="btn btn-primary" type="button" data-target="#MonCollapse">Balise button</button>

<!-- le contenu masqué -->

<section id="MonCollapse" class="collapse">
<div class="well">Je suis du texte dans un élément de classe <em>well</em>.</div>
</section>

Ajoutons les data attributs restant :

Nous devons finaliser l’intégration HTML en complétant les différents boutons d’actions avec les data attributs HTML5 suivant :

  • aria-expanded= »false » : alerte le navigateur sur la position actuelle du Collapse : affichée « true » / masquée « false« .
  • aria-controls= »id » : permet de cibler un seul élément. « id » doit être remplacé par la dénomination de l’identifiant du Collapse.
  • data-toggle= »collapse » : permet de cibler l’élément masqué avec jQuery.

 

<!-- les boutons d'actions -->
<a class="btn btn-primary" href="#MonCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="MonCollapse">Balise a</a>
<button class="btn btn-primary" type="button" data-target="#MonCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="MonCollapse">Balise button</button>

<!-- le contenu masqué -->

<section id="MonCollapse" class="collapse">
<div class="well">Je suis du texte dans un élément de classe <em>well</em>.</div>
</section>

 

Dynamiser l’élément avec jQuery

Vous pouvez avec JavaScript définir des paramètres spécifiques, comme la possibilité d’afficher le contenu ouvert à l’affichage de la page, alors que ce dernier est normalement masqué. Pour appliquer cette modification, nous devons procéder comme suit :


$('#MonCollapse').collapse({
show: true
})

Consultez toutes les options de customisation JavaScript sur le site officiel getbootstrap.com.

 

Essayez vous-même :

Balise a

Je suis du texte dans un élément de classe well.

 
 


Ces articles pourraient vous intéresser

Tags

12 commentaires

    • zeus
    • (23 juillet 2015 at 10 h 48 min)

    merci beaucoup! c’est très instructif

    • Sophie
    • (27 octobre 2015 at 15 h 09 min)

    Bonjour,
    Il y a entre mon bouton et mon texte à afficher au clic d’autre div. Quand je clique sur mon bouton il affiche bien le contenu mais ne descend pas jusqu’à celui-ci.
    Quand je clique une deuxième fois il scroll bien mais le contenu n’est plus affiché.
    Comment faire ?
    Merci

    • Bonjour sophie, je comprends pas tout. En gros lorsque vous cliquez sur le bouton qui permet d’afficher la div, cette dernière ne s’affiche pas à cause des autre div ?
      Avez-vous un lien jsfiddle à me proposer ?

        • Sophie
        • (28 octobre 2015 at 11 h 27 min)

        Bonjour, et merci pour votre réponse je vais essayer d’être plus claire.
        J’ai bien suivi toutes les étapes et effectivement lorsque le contenu à afficher se trouve juste en dessous du bouton il n’y a pas de problème.
        Dans mon cas le contenu à afficher/masquer se situe en bas de ma page.
        Lorsque je clique sur le bouton il affiche donc bien le contenu mais on ne le voit pas puisqu’il est tout en bas de la page. Je voudrais que lorsque je clique sur mon bouton, en plus d’afficher mon contenu, il descende avec le principe d’ancrage classique…

        • Si vous utilisez une balise a le href est normalement déjà composé d’une ancre comme par exemple href="#MonCollapse". Bien entendu cette ancre pointe vers la div contenant l’identifiant id="MonCollapse" (dans le cas précis) ainsi que la classe collapse.

          CF : <section id="MonCollapse" class="collapse">

            • Sophie
            • (28 octobre 2015 at 15 h 11 min)

            Oui ! Et pourtant ça ne s’affiche pas… je dois faire quelque chose de mal mais franchement je ne vois pas quoi.

  • Il faudrait me donner un accès à votre fichier pour que je puisse y jeter un coup d’oeil Sophie.

    • Arnof
    • (25 juin 2017 at 13 h 04 min)

    Bonjour,
    J’ai le même problème que Sophie mon collapse se trouve en bas de page et fonctionne. Avez-vous une solution pour faire descendre la page et afficher le content. Sans quoi on est obligé de scroller pour le voir. Merci d’avance pour votre réponse.
    Cordialement,

    • OUEZZANI Saad
    • (6 avril 2018 at 11 h 42 min)

    Lorsque je clique sur le bouton la section masquée s’affiche puis disparait tout de suite. Est ce que quelqu’un peut m’aider chers amis.

    • Hakim
    • (30 janvier 2019 at 11 h 46 min)

    Hello Benoît ! Merci pour ce super tuto.
    J’ai un soucis qui m’annonce que le « MonCollapse.collapse » n’est pas une fonction. Je tourne en rond je vois pas .
    Une idée? ^^

    • salut Hakim, quelle version de bootstrap utilises-tu?
      Ce tuto est un peu daté du coup, envoie moi ton code via le formulaire de contact j’essaie de regarder 🙂

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.