Nous allons décortiquer rapidement le code afin que vous puissiez le modifier à votre guise (le styliser).

Pour apporter des modifications au bloc, il convient de modifier les éléments situés entre les balises <style> </style> ici en rouge sur un fond gris.

<style>

button.accordion {

background-color: #eee;

color: #444;

cursor: pointer;

padding: 18px;

width: 100%;

border: none;

text-align: left;

outline: none;

font-size: 15px;

transition: 0.4s;

} >>>>>>>>> Cette partie du code permet de modifier les boutons du menu, exemple le background avec la valeur « fff » qui correspond au blanc en hexa cela vous donnera un menu tout blanc.

button.accordion.active, button.accordion:hover {

background-color: #ddd;

} >>>>>>>>> Cette partie du code permet de modifier la couleur du menu au survole.

button.accordion:after {

content: '\02795';

font-size: 13px;

color: #777;

float: right;

margin-left: 5px;

} >>>>>>>>> Cette partie du code permet de modifier le style des menus.

button.accordion.active:after {

content: "\2796";

} >>>>>>>>> Ne pas toucher.

div.panel {

padding: 0 18px;

background-color: white;

max-height: 0;

overflow: hidden;

transition: 0.6s ease-in-out;

opacity: 0;

} >>>>>>>>> Cette partie du code permet de modifier ce qui se trouve dans chaque menu une fois déplié.

Par exemple le fond est en blanc, vous pouvez changer la couleur pour faire apparaître une autre.

Ou encore en retirant « overflow » cela créera un espac entre les menus.

div.panel.show {

opacity: 1;

max-height: 500px;

} >>>>>>>>> Cette partie du code modifie l’opacité et la taille du contenu du menu. Les valeurs de l’opacity sont 0 ou 1 (0 étant l’affichage d’un contenu invisible).

</style>

<body>

<button class="accordion">Section 1</button>

<div class="panel">

<p>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.</p>

</div>

<button class="accordion">Section 2</button>

<div class="panel">

<p>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.</p>

</div>

<button class="accordion">Section 3</button>

<div id="foo" class="panel">

<p>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.</p>

</div>

>>>>>>>>> Cette partie du code vous permet de modifier votre texte entre les balises <p> <\p>

<script>

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

}

}

</script>

>>>>>>>>>Il ne faut surtout pas toucher à cette partie car cela désactivera l’effet déroulant au clic sur le menu.