Apprenez à créer un accordéon (collapsible content) .
Accordéon
Accordéons sont utiles lorsque vous souhaitez basculer entre cachette et montrant grande quantité de contenu:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne tempor eiusmod incididunt ut labore et dolore magna aliqua. Enim ad minim Ut veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Créer un accordéon
Étape 1) Ajouter HTML:
Exemple
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>
<button class="accordion">Section
2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem
ipsum...</p>
</div>Étape 2) Ajouter CSS:
Le style de l'accordéon:
Exemple
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
/* Style the accordion panel. Note:
hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
display: none;
}
/* The "show" class is added to the
accordion panel when the user clicks on one of the buttons. This
will show the panel content */
div.panel.show {
display: block !important;
}Étape 3) Ajouter JavaScript:
Exemple
/* Toggle between adding and removing the
"active" and "show" classes when the user clicks on one of the
"Section"
buttons. The "active" class is used to add a background color to the
current button when its belonging panel is open. The "show" class is used to open the
specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick =
function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
} Essayez vous - même » Accordéon d'animation
Effectuez les modifications suivantes aux panel et show des classes, pour faire un accordéon animé.
Cela rendra la lame d'accordéon vers le bas (max-height) et se fanent en (opacity) :
Exemple
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition:
0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height:
500px; /* Whatever you like, as long as its more than the height of the
content (on all screen sizes) */
}
Essayez vous - même » Ajouter des icônes
Ajouter un symbole à chaque bouton pour indiquer si le contenu pliable est ouvert ou fermé:
Exemple
button.accordion:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}
Essayez vous - même »