Accordéons W3.CSS
Cliquez sur les boutons "Ouvrir la section" ci-dessous pour voir comment fonctionnent les accordéons :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
Accordéon
Un accordéon est utilisé pour afficher (et masquer) le contenu HTML.
Utilisez la classe w3-hide pour masquer le contenu accordéon.
Utilisez n'importe quel type de bouton pour ouvrir et fermer le contenu :
Exemple
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Open Section 1</button>
<div id="Demo1" class="w3-container
w3-hide">
<p>Some text..</p>
</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>
L'élément utilisé pour ouvrir l'accordéon et le contenu de l'accordéon peuvent être n'importe quel élément HTML.
Accordéon vs Dropdown
Ce tableau montre la différence entre un accordéon et une liste déroulante :
| Accordéon | Menu déroulant |
|---|---|
| Le contenu pousse le contenu de la page vers le bas | Le contenu se superpose au contenu existant de la page |
| Le contenu est souvent large à 100 % | Le contenu fait 160px de large (par défaut) |
| Souvent utilisé pour ouvrir plusieurs sections | Souvent utilisé pour ouvrir une section |
Accordéons
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Listes déroulantes
Boutons d'accordéon
Vous pouvez utiliser n'importe quel élément HTML pour ouvrir le contenu de l'accordéon. Nous préférons un bouton avec une classe w3-block , pour couvrir toute la largeur de la page (100% de largeur).
N'oubliez pas que les boutons dans W3.CSS sont centrés par défaut. Utilisez la classe w3-left-align si vous voulez qu'ils soient alignés à gauche à la place. Cependant, vous n'êtes pas obligé de suivre notre approche - un accordéon aura fière allure dans les deux cas :
Lorem ipsum...
Lorem ipsum...
Centered content as well!
Exemple
<button onclick="myFunc('Demo1')"
class="w3-button">
Normal button</button>
<div id="Demo1" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-button w3-block w3-left-align
w3-green">
Left aligned and full-width</button>
<div id="Demo2" class="w3-hide">
<p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn w3-block
w3-red">
Centered and full-width</button>
<div id="Demo3"
class="w3-hide w3-center">
<p>Centered content as well!</p>
</div>
Boutons d'accordéon actifs
Utilisez JavaScript pour mettre en surbrillance les accordéons ouverts (cliqués) :
Some text..
Some other text..
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", "");
}
Largeur accordéon
Par défaut, la largeur du bloc est de 100 %. Pour remplacer cela, modifiez la propriété CSS width du conteneur accordéon :
Some text..
Some text..
Some text..
Some text..
Exemple
<div class="w3-light-grey" style="width:50%">
<button onclick="myFunction('Demo1')"
class="w3-button w3-block">
50%
</button>
<div id="Demo1" class="w3-hide">
<p>Some text..</p>
</div>
</div>
Contenu de l'accordéon
Accordéon avec liens :
Exemple
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<a href="#" class="w3-button w3-block w3-left-align">Link 1</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 2</a>
<a href="#"
class="w3-button w3-block w3-left-align">Link 3</a>
</div>
Accordéon en liste :
- Julie
- Veille
- Adam
Exemple
<button onclick="myFunction('Demo1')"
class="w3-button w3-block w3-left-align">
Accordion</button>
<div id="Demo1" class="w3-hide">
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Accordéon dans une barre latérale (vous en apprendrez plus sur les barres latérales plus tard):
Exemple
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button" onclick="myAccFunc()">Accordion</a>
<div
id="demoAcc" class="w3-hide">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<a href="#" class="w3-bar-item w3-button" onclick="myDropFunc()">Dropdown</a>
<div
id="demoDrop" class="w3-dropdown-content">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
Accordéons animés
Utilisez l'une des classes w3-animate- pour fondre, zoomer ou faire glisser le contenu de l'accordéon :
Exemple
<div id="Demo1" class="w3-hide
w3-animate-zoom">