FAQ Accordion

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 7 months ago

  hi there! 👋👋

  If you mean interacting with the DOM using JavaScript we have a couple of options to select and modify DOM elements:

  • querySelector()
  • querySelectorAll()
  • getElementbyId / ClassName / Tagname
  • innerHTML()
  • text()

  you can look up use cases for each of (speaking of which, there's actually forEach() for looping through an array of elements selected by any of the methods mentioned before ☝️☝️ ) these

  From there you can listen for events with the amply named .addEventListener method, and you can modify elements based on the interaction. You can add previously defined CSS classes modifying the elements color, display etc. properties, or you can use the {selector}.style.{property} JS syntax to modify them directly (this approach is more hardware-heavy for clients)

  transitions used to define the same behaviours that eventListeners are listening to, but in CSS. you need to define what properties you want to apply the transition to. For example:

  .card {
  left: 0;
  transition: left .5s ease-in 1s;         // property: duration easing-method delay;
  }
  
  .card:hover {
  left: 2vw;
  }
  

  would apply a transition to .card 's left property when card is hovered over

  animations are the same idea, but you need to define @keyframe at-rules for them

  Hope this was helpful! 🙏

  Good luck and happy coding! 💪

  Marked as helpful

  0