Aller au contenu principal
Guillaume Duverger Code & graphisme

Accordéon (toggle) en pur JavaScript

L'objectif de cette démonstration est de créer un accordéon en pur JavaScript qui, au clic de la souris/ toucher au doigt, va dérouler du contenu caché (effet toggle).

Rubrique 1

Titre1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Rubrique 2

Titre2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Rubrique 3

Titre3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula. </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula. </p>




<a class="accordeon" href="#contenu-1">Rubrique 1</a>
<div class="contenu-accordeon" id="contenu-1">
<h2>Titre1</h2>
<p>...</p>
<p>...</p>
</div>
<a class="accordeon" href="#contenu-2">Rubrique 2</a>
<div class="contenu-accordeon" id="contenu-2">
<h2>Titre2</h2>
<p>...</p>
<p>...</p>
</div>
<a class="accordeon" href="#contenu-3">Rubrique 3</a>
<div class="contenu-accordeon" id="contenu-3">
<h2>Titre3</h2>
<p>...</p>
<p>...</p>
</div>






document.addEventListener('click', function (event) {
				
if ( !event.target.classList.contains('accordeon') ) return;
			
var content = document.querySelector(event.target.hash);
if ( !content ) return;

event.preventDefault();

if ( content.classList.contains('active') ) {
content.classList.remove('active');
return;
}
		
var accordions = document.querySelectorAll('.contenu-accordeon');
				
for (var i = 0; i < accordions.length; i++) {
accordions[i].classList.remove('active');
}
		
content.classList.add('active');
}, false);





/*transition CSS toggle*/

.contenu-accordeon {

height: 0;
overflow-y: auto;
transition: height .4s ease-in-out

}
.contenu-accordeon.active {

height:100vh;
max-height:20rem


}