Derniers tutoriels de développement web
 

W3.CSS Accordéons


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:

la

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.

la la

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>

Essayez - le vous - même »

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

dropdowns

  • Le contenu est minimal 160px de large et plus si nécessaire
  • Une fois ouvert, il pose sur le contenu de la page (position: absolute)
  • Souvent utilisé pour une section "ouvert"

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>

Essayez - le vous - même »


Boutons d'accordéon actifs

Utilisez JavaScript afin de mettre en évidence les accordéons qui sont ouverts (cliqué sur):

la

Certains textes ..

la

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", "");
}

Essayez - le vous - même »


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>

Essayez - le vous - même »


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>

Essayez - le vous - même »

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>

Essayez - le vous - même »

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>

Essayez - le vous - même »


Accordéons animés

Utilisez l' une des classes w3-animate- à disparaître, le zoom ou glisser dans le contenu de l' accordéon:

Exemple

<div id="Demo1" class="w3-accordion-content w3-animate-zoom">

Essayez - le vous - même »