HTML :
<section class="section nos-pratiques">
<div class="container">
<div class="columns accordeon">
<ul class="pratiques">
<li class="pratique is-active">
<div class="columns">
<div class="column titre-pratique">
<p class="subtitle is-6 has-text-centered">Titre 1</p>
</div>
<div class="column is-8 detail-pratique">
<div class="content">
<div class="columns is-centered">
<div class="column is-10">
<div class="columns">
<div class="column illustration">
<img src="img/image1.jpg" alt="Image 1">
</div>
<div class="column">
<h4 class="title is-4 is-spaced">Titre 1</h4>
<h5 class="subtitle is-6">Sous-titre 1</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci molestiae illum obcaecati quos vel voluptas accusantium commodi minima nam porro.</p>
<a href="#" class="button">en savoir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="pratique">
<div class="columns">
<div class="column titre-pratique">
<p class="subtitle is-6 has-text-centered">Titre 2</p>
</div>
<div class="column is-8 detail-pratique">
<div class="content">
<div class="columns is-centered">
<div class="column is-10">
<div class="columns">
<div class="column illustration">
<img src="img/image2.jpg" alt="Image 2">
</div>
<div class="column">
<h4 class="title is-4 is-spaced">Titre 2</h4>
<h5 class="subtitle is-6">Sous-titre 2</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci molestiae illum obcaecati quos vel voluptas accusantium commodi minima nam porro.</p>
<a href="#" class="button">en savoir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="pratique">
<div class="columns">
<div class="column titre-pratique">
<p class="subtitle is-6 has-text-centered">Titre 3</p>
</div>
<div class="column is-8 detail-pratique">
<div class="content">
<div class="columns is-centered">
<div class="column is-10">
<div class="columns">
<div class="column illustration">
<img src="img/image3.jpg" alt="Image 3">
</div>
<div class="column">
<h4 class="title is-4 is-spaced">Titre 3</h4>
<h5 class="subtitle is-6">Sous-titre 3</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci molestiae illum obcaecati quos vel voluptas accusantium commodi minima nam porro.</p>
<a href="#" class="button">en savoir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="pratique">
<div class="columns">
<div class="column titre-pratique">
<p class="subtitle is-6 has-text-centered">Titre 4</p>
</div>
<div class="column is-8 detail-pratique">
<div class="content">
<div class="columns is-centered">
<div class="column is-10">
<div class="columns">
<div class="column illustration">
<img src="img/image4.jpg" alt="Image 4">
</div>
<div class="column">
<h4 class="title is-4 is-spaced">Titre 4</h4>
<h5 class="subtitle is-6">Sous-titre 4</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci molestiae illum obcaecati quos vel voluptas accusantium commodi minima nam porro.</p>
<a href="#" class="button">en savoir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="pratique">
<div class="columns">
<div class="column titre-pratique">
<p class="subtitle is-6 has-text-centered">Titre 5</p>
</div>
<div class="column is-8 detail-pratique">
<div class="content">
<div class="columns is-centered">
<div class="column is-10">
<div class="columns">
<div class="column illustration">
<img src="img/image5.jpg" alt="Image 5">
</div>
<div class="column">
<h4 class="title is-4 is-spaced">Titre 5</h4>
<h5 class="subtitle is-6">Sous-titre 5</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci molestiae illum obcaecati quos vel voluptas accusantium commodi minima nam porro.</p>
<a href="#" class="button">en savoir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="pratique is-active">
<div class="columns">
<div class="column titre-pratique">
<p class="subtitle is-6 has-text-centered">Titre 6</p>
</div>
<div class="column is-8 detail-pratique">
<div class="content">
<div class="columns is-centered">
<div class="column is-10">
<div class="columns">
<div class="column illustration">
<img src="img/image6.jpg" alt="Image 6">
</div>
<div class="column">
<h4 class="title is-4 is-spaced">Titre 6</h4>
<h5 class="subtitle is-6">Sous-titre 6</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci molestiae illum obcaecati quos vel voluptas accusantium commodi minima nam porro.</p>
<a href="#" class="button">en savoir plus</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
CSS :
.nos-pratiques{
position: relative;
padding: 8rem 1.5rem;
}
.nos-pratiques .accordeon{
position: relative;
}
.nos-pratiques .pratiques .pratique>.columns{
margin: 0;
border-right: 10px solid var(--color-3);
}
.nos-pratiques .pratiques .pratique .titre-pratique{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 2.5rem 1.5rem;
border-bottom: 1px solid var(--color-3);
transition: all 0.5s ease-in-out;
}
.nos-pratiques .pratiques .pratique .titre-pratique .subtitle{
color: var(--color-4);
font-weight: 600;
transition: all 0.5s ease-in-out;
}
.nos-pratiques .pratiques .pratique .column.detail-pratique{
padding: 0 0.75rem;
}
.nos-pratiques .pratiques .pratique .column.detail-pratique .content{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem;
}
.nos-pratiques .pratiques .pratique .column.detail-pratique .content .illustration{
display: none;
}
@media screen and (min-width: 769px){
.nos-pratiques .pratiques .pratique .titre-pratique:hover, .nos-pratiques .pratiques .pratique.is-active .titre-pratique{
background-color: var(--color-1);
}
.nos-pratiques .pratiques .pratique .titre-pratique:hover .subtitle, .nos-pratiques .pratiques .pratique.is-active .titre-pratique .subtitle{
color: var(--white);
}
.nos-pratiques .pratiques .pratique .column.detail-pratique{
position: absolute;
padding: 0;
left: 25%;
top: 0;
}
.nos-pratiques .pratiques .pratique .column.detail-pratique{
height: 0;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.nos-pratiques .pratiques .pratique.is-active .column.detail-pratique{
height: 100%;
}
.nos-pratiques .pratiques .pratique .column.detail-pratique .content .illustration{
display: block;
}
.nos-pratiques .pratiques .pratique .column.detail-pratique .content img{
margin: 0 auto;
}
}
JS :
$(document).ready(function () {
$(".pratique").click(function () {
$(".pratique").removeClass("is-active");
$(this).toggleClass("is-active");
});
});