Les accordéons sont l'un de ces instruments ennuyeux que certains d'entre vous ont peut-être déjà vu.
Il a un de ces soufflets avec un clavier en bas
ici et puis vous soufflez et puis jouez la musique avec les touches là-bas.
Et tout le monde n'aime pas ça.
Je suis presque sûr. Mais pas offenser les joueurs d'accordéon.
Les accordéons en bootstrap sont très intéressants à coup sûr.
Nous examinerons la façon dont nous appliquons les accordéons pour pouvoir révéler et
masquer le contenu de notre page Web dans cet exercice.
Revenir à la page À propos de nous à la page HTML où nous avions l'information sur le leadership de l'entreprise.
Maintenant, je vais remplacer la navigation supérieure par une navigation basée sur l'accordéon.
Je vais supprimer cet UL qui définit complètement le terme navigation.
Et puis nous allons concevoir l'accordéon autour du contenu que nous avons déjà.
Donc, supprimons cet UL qui contient la navigation par onglet afin qu'ils soient laissés
avec juste cette partie qui est enfermée à l'intérieur du panneau supérieur et le contenu supérieur.
Donc, nous allons aller modifier ça.
Aller à cette div ici,
je vais supprimer cette classe de là et ensuite j'applique l'id comme accordéon.
Nous avons besoin de cet identifiant plus tard pour pouvoir créer l'accordéon que div,
qui contient ce contenu est toujours en place là.
Donc, le contenu supérieur est maintenant changé en accordéon.
Maintenant, chacun de ce contenu ici,
nous allons le convertir en une
structure basée sur la carte là-bas afin qu'ils puissent révéler le contenu de
chacune de ces cartes afin que vous me verrez utiliser la carte et les
classes de corps de la carte là pour enfermer ce contenu.
Maintenant, en entrant dans le contenu réel ici,
je vais commencer à appliquer la classe de carte ici avec la div là-bas.
Donc, nous allons dire, « carte de classe div »,
puis fermer la div là et puis ce contenu va dans la div là-bas.
Maintenant, ici, nous allons entrer et créer
un div avec la classe « en-tête de carte ».
Je vais vous montrer pour l'un d'eux et ensuite nous allons
répéter ce processus pour les trois autres aussi.
Donc, nous allons dire, « onglet rouleau d'en-tête de carte » et ensuite « ID Peterhead ».
Je vais prendre ce h3 d'en bas ici, le
découper et ensuite le coller dans le panneau de carte.
Donc, ce h3 qui définit le nom de la
personne dirigeante de l'entreprise est coupé
à l'intérieur du panneau de tabulation, puis déplacé dans l'en-tête de la carte ici.
Ça va servir d'aide à la navigation.
Maintenant, à ce h3, je vais appliquer une classe appelée mb-0.
Donc, c'est mb-0 ici.
Maintenant, ce nom lui-même,
je vais joindre ceci à l'intérieur et un a,
donc je vais passer à la ligne suivante et dire,
« un basculement de données » et
le basculement de données dira, « effondrement ».
Donc, maintenant, vous voyez que vous utilisez le plugin collapsus.
Donc, nous avons cette fermeture h3 là.
Donc, je vais passer à la ligne suivante
ici et ensuite je vais fermer l'étiquette a juste là.
Donc, avec cela, le tag a renferme maintenant le nom du PDG ici.
Et puis la balise h3 ferme bien sûr le h3 sur le dessus et puis c'est
à l'intérieur du div qui est l'en-tête de la carte de classe.
Donc, cela forme la structure d'en-tête pour mon div accordéon.
En allant maintenant dans le panneau d'onglets ci-dessous,
je vais changer cette classe de fondu du panneau d'onglets à réduire.
Donc, ce serait un plugin d'effondrement qui sera utile pour notre accordéon
et aussi je vais supprimer cette classe active
pour cela et l'id sera laissé comme peter pour cela.
Et puis vous direz, « parent de données » et vous spécifieriez accordéon.
Vous voyez pourquoi nous avons donné l'identifiant de l'accordéon à la div qui entoure tous ces contenus.
Donc, c'est la façon de spécifier que cela fera
partie de l'accordéon que vous construisez là-bas.
Donc, c'est pourquoi l'accordéon parent de données.
Maintenant, le contenu à l'intérieur de cet onglet,
je vais l'enfermer à l'intérieur de la div avec
le corps de la carte de classe
et fermer cette div ici,
puis indenter ce contenu là-dedans.
Sauvegardons les modifications, puis allons jeter un oeil à notre page web sur ce moment. En
allant sur notre page Web, vous remarquez maintenant que dans la direction de l'entreprise,
le nom du PDG est mis en évidence ici dans l'en-tête de la carte ici.
Et puis le contenu est en bas ici.
Maintenant, nous allons créer les trois restants ci-dessous, puis les inclure tous dedans.
Je vais répéter la même structure pour les autres.
Donc, j'aurai la carte avec l'en-tête de la carte,
et l'en-tête de la carte va inclure le nom de la personne comme ceci.
Donc, vous suivrez à peu près
la même structure pour les trois éléments de contenu restants.
Alors, faisons les changements et puis nous reviendrons et examinerons le code.
En revenant au code,
vous voyez maintenant que pour les trois autres,
vous remarquez que j'utilise toujours la carte ici
avec l'en-tête de la carte ici et h3 avec le mb-0.
Ceci est à l'intérieur de la classe d'en-tête de carte div là-bas, puis en dessous de
la classe seulement comme effondrement, puis avec l'id
, puis le corps de la carte qui entoure le P là.
Même chose avec les deux autres aussi.
Donc, avec ce changement,
ces trois autres informations sur les dirigeants d'entreprise seront
effondrées, mais l'information fouettée de Peter Pan
sera révélée lors du premier rendu de la page Web.
Donc, avec ce changement, maintenant,
cet extrait de code est évidemment disponible dans
les instructions qui suivent ici donc pas besoin de trop vous inquiéter.
Vous pouvez toujours vous référer à cela pour vous assurer que vous l'avez fait correctement.
Donc, sauvegardons les modifications.
En revenant à notre page web,
vous voyez maintenant l'accordéon construit ici.
Donc, vous voyez que les premières informations sur les dirigeants d'entreprise sont affichées ici.
Les trois autres sont effondrés en ce moment.
Donc, c'est la raison de l'utilisation du plugin collapsus et aussi la raison pour déplacer
le nom du leader de l'entreprise dans le titre de la carte.
Voyez que vous avez vu qu'il sera affiché comme ça là-dedans.
Maintenant, en cliquant sur l'un d'entre eux, vous remarquez maintenant
que lorsque vous cliquez sur ce contenu sera révélé mais les trois autres sont masqués.
Donc, c'est le comportement de l'accordéon ici.
Donc, avec cela, nous terminons cet exercice.
C' est un bon moment pour vous de faire un commit git avec le message accordéon..