Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Effet toggle en CSS

Dernière modification : juin 2022

Exemple 1 :

Effet toogle en utilisant CSS Grid layout (avec transition sur la propriété grid-template-rows) :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor nibh vel pretium elementum. Fusce pretium molestie tellus. Sed id condimentum sem.



<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>

<div class="message">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor nibh vel pretium elementum. Fusce pretium molestie tellus. Sed id condimentum sem.</p>

</div>




*,*::before,*::after{box-sizing:border-box}

	
.toogle-demo{

max-width:600px;
display:grid;
overflow: hidden;
margin:4rem auto 10rem auto;

	}
	

.message{

display:grid;
grid-template-rows: 0;
background:#e5e5e5;
transition:grid-template-rows .4s ease-in-out;
	}
	
.message p{

padding: 20px;

	}

	
#toggle_demo {
	
display:none
	
	}

#toggle_demo + label {

justify-self: end;
z-index: 2;
cursor: pointer;
font-size: 1.5rem;
color: white
	
}

#toggle_demo + label::before,
#toggle_demo + label::after{

height: 40px;
display: grid;
place-items: center;
padding: 0 10px;

	
	}
	
	
#toggle_demo + label::before{
	
background-color: #6753ea;
content: "cliquez ici"
	
	}

#toggle_demo:checked ~ .message{


grid-template-rows: 200px;


	}
	
	
#toggle_demo:checked + label::after{
	
background: hsl(0,53%,58%);
content: "X Fermer"
	
	}
	
#toggle_demo:checked + label::before{
	
	display:none
	
	}
	


Exemple 2 :

Ci-dessous un autre exemple avec un fondu pour cacher une partie du texte, incitant ainsi le visiteur à cliquer pour dérouler la suite du contenu :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et odio purus. Maecenas luctus arcu dolor, et suscipit diam imperdiet eget. Nullam luctus, ligula ut pulvinar mollis, dolor tortor feugiat erat, id tristique dui eros vel risus. Ut in sapien a nibh luctus vehicula eu ut ipsum. Integer sollicitudin sodales augue ac pellentesque. Donec non erat sit amet mauris venenatis posuere non in ipsum. Sed mattis et mauris at posuere. Morbi molestie sollicitudin leo in faucibus. Donec eget dolor mauris. Curabitur sit amet eros pretium, viverra metus a, tristique lectus.



<input id='demo' type="checkbox"/>
<label for="demo"></label>
<div class="demo-toggle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et odio purus. Maecenas luctus arcu dolor, et suscipit diam imperdiet eget. Nullam luctus, ligula ut pulvinar mollis, dolor tortor feugiat erat, id tristique dui eros vel risus. Ut in sapien a nibh luctus vehicula eu ut ipsum. Integer sollicitudin sodales augue ac pellentesque. Donec non erat sit amet mauris venenatis posuere non in ipsum. Sed mattis et mauris at posuere. Morbi molestie sollicitudin leo in faucibus. Donec eget dolor mauris. Curabitur sit amet eros pretium, viverra metus a, tristique lectus.</p>
</div>





*,*::before,*::after{box-sizing:border-box}

.contenu-demo-toggle {
	
margin: 2rem auto 5rem auto;
position: relative
	
	}
	
.demo-toggle{ 
	
padding: 15px 10px;
max-height: 80px;
overflow: hidden;
position: relative;
border-bottom: 2px solid #aaa;
transition: max-height .5s

}
	
.demo-toggle::before{
	
content: '';
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
left: 0;
background-image:linear-gradient(rgba(255,255,255,0),white);
transition: opacity .8s
	
	}
	
.contenu-demo-toggle input{
	
visibility: hidden
	
}
	
.contenu-demo-toggle label{
	
position: absolute;
bottom: -.8rem;
right: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
height: 30px;
width: 30px;
background-color: #6753ea;
border-radius: 50%;
box-shadow: -5px 0 white;
color: white;
z-index: 1;
cursor: pointer
	}
	
.contenu-demo-toggle label::before{
	
	content: "+"
	
	}
	
.contenu-demo-toggle input:checked + label::before{
	
	content: "-"
	
	}
	
input[type=checkbox]:checked ~ .demo-toggle{
	
	max-height:500px
	
	}
	
input[type=checkbox]:checked ~ .demo-toggle::before{
	
	opacity:0
	
	}





Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.