FAQ Accordion card (using grid, flex, and JS)

Community feedback

• 

  Ciceron•940

  @MarcusTuliusCiceronPosted over 2 years ago

  Hi congrats on this challenge,

  I think if you add a tempo between opening and closing accordeon it may look like smoother, you con try something like this:

  for(let i =0; i<questionContainers.length; i++){
      questionContainers[i].addEventListener("click", (e) => {
          if(prevOpen === i) {
              close(i);
              prevOpen = null;
          }else {
              if(prevOpen!== null){
                  close(prevOpen);
              }
              
              setTimeout(function() {
                     open(i);
                     prevOpen = i;  //your code to be executed after delay
              }, 300);
             
          }
      })
  }
  
  

  I couldn't test it as I'm currently at work :D But I think you get the idea

  Hope this will help

  Have a good day

  Marked as helpful

  0

  ---

  

  Nguyen Nguyen•340

  @jesuisbienbienPosted over 2 years ago

  @MarcusTuliusCiceron Thank you! I'll try it out

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Its because there is no enough space so it forces the container to create a space for the contents which was hidden.

  • you also forgot to add a box shadow.

  You can check the link below to see my solution. (https://www.frontendmentor.io/solutions/responsive-faq-accordion-secion-made-with-css-grid-and-css-flexbox-afLOGQNaj)

  Besides good job👍 Happy coding👍

  1