FAQ accordion using vanilla css and js

Community feedback

• 

  anass-lamiri•320

  @Anass-LamiriPosted 9 months ago

  Hi! First of all, you did a great job in your challenge, I only want to add some pointers to polish your solution:

  • from what I can see after looking at your code is that in the function show() you made an if statement that checks if the element is displayed or not, the problem is when you click the first time it checks if it display(none) is existing, if it isn't it trigger the else which will put the display(none), then you click the second time and return true because of the before else and it makes it display(block).

  parag.style.display === 'none' ? parag.style.display = 'block': parag.style.display ='none';

  what you can do here is experiment with putting a class that has a display none in the element and make the show() function toggle the class, making it easier for you.

  • and I also about your question concerning the efficient way I can recommend to you: first, in your HTML make the "questions-header" and "prg" into one div, and do not rename each element like "prg1,prg2" use the same classes on every element. second, now when selecting "questions-header" in JS, make sure to do document.querySelectorAll(".questions-header") to select all the elements that have that class name, when you do that now you can do the final thing which is checking which element is clicked:

  let qu = document.querySelectorAll(".questions-header");
  
  // active is a class you declare in your CSS
  for (let i = 0; i < qu.length; i++) {
    qu[i].addEventListener("click", function() {
      this.classList.toggle("active");
    });
  }
  
  

  I hope you find this feedback helpful, and feel free to reach out.

  Marked as helpful

  1
• 

  Prabhash Bhajani•50

  @PrabhashbhajnaiPosted 9 months ago

  parag.style.display === 'none' for this line in your js file you must check one more condition if style.display is empty string or not parag.style.display === 'none' || parag.style.display === ''

  this way the user doesn't need to click twice

  Marked as helpful

  1