How can I add a slide animation in that code

Question

I'm new to JavaScript so with the help of the community I manage to create that code but I want the slide down when I click on a project to have a smooth animation but I don't know where to put the animation code transition: all .5s ease-in-out; in the CSS or I don't know if I can do it with the JavaScript code directly.

const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
  elm.addEventListener("click", function() {
    let projectContent = elm.querySelector(".project-content");
    let arrow = elm.querySelector(".arrow-down");
    if (projectContent.style.display !== "none") {
      projectContent.style.display = "none";
      arrow.classList.toggle('rotate-arrow')
    } else {
      projectContent.style.display = "flex";
      arrow.classList.toggle('rotate-arrow')
    }
  });
});

body {
  background-color: purple;
}

.projet-contain {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  width: auto;
  height: auto;
  background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
  ;
  border-radius: 10px 10px 10px 10px;
  padding: 10px;
  user-select: none;
}

.preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section>div>div>a {
  text-decoration: none;
  color: white;
}

.convertigo {
  width: 10vw;
}

.arrow-down {
  transition: transform 0.5s;
  width: 1.5vw;
  -webkit-filter: invert(100%);
  /* safari 6.0 - 9.0 */
  filter: invert(100%);
}

.rotate-arrow {
  transform: rotate(180deg);
}

.project-content {
  justify-content: center;
}

<section>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content" style="display:none;">
      <a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas, deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
      <div>
        <img src="images/matete.webp" alt="">
      </div>
    </div>
  </div>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content" style="display:none;">
      <a>c'est la div 2</a>
    </div>
  </div>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content" style="display:none;">
      <a>c'est la div 3</a>

    </div>
  </div>
</section>

Please [edit] your question to show what research you have done into this subject. There are many questions about how to make a slide animation on Stack Overflow, and it's not clear where you're having a problem integrating it. — Heretic Monkey, Oct 09 '22 at 15:55
The issue you have is that display: is not animatable. You can use max-height instead like this https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Adam, Oct 09 '22 at 15:56
Does this answer your question? [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — Heretic Monkey, Oct 09 '22 at 16:03

score 1 · Accepted Answer · answered Oct 10 '22 at 08:59

Is this what you're looking for?

const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
  elm.addEventListener("click", function() {
    let projectContent = elm.querySelector(".project-content");
    let arrow = elm.querySelector(".arrow-down");
    arrow.classList.toggle('rotate-arrow');
    projectContent.classList.toggle("display");
  });
});

body {
  background-color: purple;
}

.projet-contain {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
  width: auto;
  height: auto;
  background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
  ;
  border-radius: 10px 10px 10px 10px;
  padding: 10px;
  user-select: none;
}

.preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section>div>div>a {
  text-decoration: none;
  color: white;
}

.convertigo {
  width: 10vw;
}

.arrow-down {
  transition: transform 0.5s;
  width: 1.5vw;
  -webkit-filter: invert(100%);
  /* safari 6.0 - 9.0 */
  filter: invert(100%);
}

.rotate-arrow {
  transform: rotate(180deg);
}

.project-content {
  justify-content: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms ease-out;
}

.display {
  max-height: 100vh;
}

<section>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content">
      <a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor
          incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis
          voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed
          aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis
          blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi
          praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi
          architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos
          deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga
          soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis
          voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam
          quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum
          autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere
          laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas,
          deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime
          quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
      <div>
        <img src="images/matete.webp" alt="">
      </div>
    </div>
  </div>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content">
      <a>c'est la div 2</a>
    </div>
  </div>
  <div class="projet-contain">
    <div class="preview">
      <a>Projet Convertigo</a>
      <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
      <img src="images/Convertigo.png" class="convertigo" alt="">
    </div>
    <div class="project-content">
      <a>c'est la div 3</a>
    </div>
  </div>
</section>

How can I add a slide animation in that code

1 Answers1