Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Lightbox/slideshow/slider

Flexbox accordéon CSS

Code :

HTML


<div class="accordeon">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="accordeon1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>


CSS


/* reset */

*{box-sizing:border-box}
body{margin:0}


/* reset */


.accordeon {

margin: 2rem  auto;
display: flex;
height: 400px;
max-width: 600px
	
}
	
.accordeon div {
	
flex-grow: 1;
transition: flex .5s
	
}
		
.accordeon div:hover {
	
flex-grow:10
	
}
	
.accordeon div:first-child,
.accordeon1 div:first-child{
	
background:url(image.jpg) no-repeat center center;
background-size: cover
	
	}
	
.accordeon div:nth-child(2),
.accordeon1 div:nth-child(2){
	
background:url(image.jpg) no-repeat center center;
background-size: cover
	
	}

.accordeon div:nth-child(3),
.accordeon1 div:nth-child(3){
	
background:url(image.jpg) no-repeat center center;
background-size: cover
		
	}
	
.accordeon div:nth-child(4),
.accordeon1 div:nth-child(4){

background:url(image.jpg) no-repeat center center;
background-size: cover
	
	}
	
.accordeon div:last-child,
.accordeon1 div:last-child{
	
background:url(image.jpg) no-repeat center center;
background-size: cover
	}
	
	
	
.accordeon1 {
	
margin: 2rem  auto;
display: flex;
height: 400px;
max-width: 600px
	
}
	
.accordeon1 div {

flex: 1 1 10%;
transition: flex .5s

}
	
.accordeon1 div:hover {
	
flex: 1 0 100%
	
}
	

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

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.