Flexbox accordéon CSS


✔️ Support navigateurs :

Chrome Edge firefox Internet Explorer Opera Safari iOS Safari UC Browser Samsung Internet
Chrome-logo Edge Browser-logo firefox-logo Internet Explorer-logo Opera-logo Safari-logo iOS Safari-logo UC Browser-logo Samsung Internet-logo
✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
29+ 12+ 28+ 10+ 17+ 9+ 9.2+ 11.4 (support partiel) 4+

<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>



/* 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%
	
}