Accordéon
Un accordéon est utilisé pour montrer (et cacher) le contenu qui est divisé en sections.
Cliquez sur les boutons "Open Section" ci-dessous pour voir comment il fonctionne:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordéon Images:
Trolltunga, Norvège
La classe w3-accordéon définit un accordéon, et la classe w3-accordéon contenu définit la partie à afficher:
Exemple
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')"
class="w3-btn-block w3-left-align">
Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content
w3-container">
<p>Some text..</p>
</div>
</div>
<script>
function myFunction(id) {
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>Tant l'élément qui est utilisé pour ouvrir l'accordéon et le contenu de l'accordéon peut être tout élément HTML.
Accordéon vs. Dropdown
La liste ci-dessous montre la différence entre un accordéon et un menu déroulant:
Accordéons
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ne TEMPOR eiusmod ut labore et dolore incididunt magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Le contenu est 100% de largeur (enjambe toute la largeur de l'élément parent)
- Une fois ouvert, il pousse le contenu de la page vers le bas, le cas échéant (position: relative)
- Souvent utilisé pour "ouvrir" plusieurs sections
Accordéon Boutons
Vous pouvez utiliser tout élément HTML pour ouvrir le contenu de l'accordéon. Nous préférons un bouton avec une classe w3-btn-bloc, car il couvre toute la largeur de son élément parent, tout comme le contenu de l' accordéon (largeur 100%). Rappelez-vous que les boutons de W3.CSS sont centrés par défaut. Utilisez la classe w3-gauche-align si vous voulez qu'ils alignés à gauche à la place. Cependant, vous n'êtes pas obligé de suivre notre approche - un accordéon aura l'air bien de toute façon:
Lorem ipsum ...
Lorem ipsum ...
Centré contenu aussi bien!
Exemple
<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')"
class="w3-btn">
Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align
w3-green">
Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block
w3-red">
Centered & full-width
</button>
<div id="Demo3"
class="w3-accordion-content w3-center">
<p>Centered content as well!</p>
</div>
</div>Boutons d'accordéon actifs
Utilisez JavaScript afin de mettre en évidence les accordéons qui sont ouverts (cliqué sur):
Certains textes ..
Certains autre texte ..
Exemple
// Add the w3-red class to all opened accordions
var x =
document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += "
w3-red";
} else {
x.className = x.className.replace("w3-show",
"");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}Accordéon Largeur
Par défaut, la largeur d'un accordéon est de 100%. Pour remplacer ce, modifiez la propriété CSS width du conteneur w3-accordéon:
Certains textes ..
Certains textes ..
Certains textes ..
Certains textes ..
Exemple
<div class="w3-accordion w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-btn-block">
50%
</button>
<div id="Demo1" class="w3-accordion-content">
<p>Some text..</p>
</div>
</div>Accordéon contenu
Accordéon avec des liens:
Exemple
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>Accordéon comme une carte avec des listes:
- Jill
- Veille
- Adam
Exemple
<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')"
class="w3-btn-block w3-left-align">
Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
</div>Accordéon dans un sidenav(Note: vous en apprendrez plus sur les navigations secondaires plus tard):
Exemple
<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
<a onclick="myAccFunc()" href="#">Accordion</a>
<div
id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="w3-dropdown-click">
<a onclick="myDropFunc()" href="#">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>Accordéons animés
Utilisez l' une des classes w3-animate- à disparaître, le zoom ou glisser dans le contenu de l' accordéon: