CODEWITHSUNDEEP
javascripthtmlcsscss-animations
Jan Clerinx
Jan Clerinx

Reputation: 11

Javascript animation after action not working

I'm trying to add a dropdown effect to my website but I can't seem to get it right. I'd like to click on the '+' and let the shape expand to show text, so after I clicked '+', some sort of animation should begin? I'm new to javascript and I'd like if someone could help me out

http://severinereard.be/test/

Here's the website, I only finished the mobile version so it's best viewed in a thin browser window.

In the first section 'Pelvi-périnéologie' I added a paragraph which I hid with display none.

I hope this is enough information

UPDATE: I added the javascript and it works for the first section but not for the rest. I'd also like for the dropdown to not go so fast but smooth?

Thanks in advance!

Upvotes: 1

Views: 68

Answers (1)

Gerard
Gerard

Reputation: 15786

Here's an example of a possible solution. Layout is different, but you'll get the idea.

UPDATE: included javascript to handle the click

const sections = [...document.getElementsByTagName("section")];
sections.map((section) => {
  section.addEventListener("click", function() {
    const paragraph = this.querySelector("p");
    paragraph.style.maxHeight = "100px";
  })
})
section {
  display: inline-block;
}

section img,
section h3,
section h5 {
  display: inline;
}

section p {
  max-height: 0;
  overflow-y: scroll;
  transition: max-height 1s;
  width: 300px;
  /* for demo purpose */
}

section:hover p {
  /*max-height: 100px;  to force scrollbar */
}
<section>
  <img src="https://via.placeholder.com/40">
  <h3>Pelvi-périnéologie</h3>
  <h5>+</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

Upvotes: 1

Related Questions