logo

Box Accordéon

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");
    });
});