FAQ Accordian

Community feedback

• Account deleted

  Hey there! 👋

  Congratulations on completing the challenge! 🎉

  • How can I add a transition effect when opening an answer on a click event?

  Transitions don't work with height: auto and display, but you can use max-height. However, using max-height may not be a perfect solution either. Another option is to set a fixed height for the element in JavaScript.

  • I need assistance with positioning the background image as per the design requirements.

  There are several ways to achieve this. For example, you can set the width of the block(screenshot) with the background and use a background image and positioning to place it in the right position.

  background-image: url(illustration-desktop),url(pattern-desktop);

  background-position: right [value], right [value];

  • How can I remove all previously applied classes from the previously clicked question when I click on a new one?

  Without changing your code, then so:

  if (previousQuestion && previousQuestion !== event.target) {
    previousQuestion.classList.remove('open')
    const parent = previousQuestion.closest('.accordian__item')
    parent.querySelector('.accordian__colapse').classList.remove('collapse') 
  } 
  

  • Try not to use the .accordion__item h2 notation, instead you can set the styles for the h2 (if they are global) or use the .accordion__title class

  • Not recommended to use a <button> element directly inside an <h2> element

  Why don't you use the shorthand notation for SCSS classes? .accordion { &__item {} }

  If you have any questions or need further clarification, please don't hesitate to reach out to me.

  Happy coding! 💻

  Marked as helpful

  0