FAQ accordion using Array

Community feedback

• 

  Moses•340

  @mbtenkorangPosted 9 months ago

  Hello Kim, Congratulation on successfully completing this challenge. Here is a recommendation to improve it.

  • For opening and closing the list of questions to view the answers, an ideal solution will be to extract the property {open: false} for each object in the array into a separate data property advisably a falsy value const activeIndex = ref(null) then use a method to do the following:

  1. The function will take the index as a parameter.
  2. The function first evaluates the expression activeIndex.value === index, if this is true it means the answer is open so the return value for activeIndex should be null so that it hides the answer, else the function should assign the index to the value of activeIndex activeIndex.value = index to open it.

  function toggle(index){
  return activeIndex.value = (activeIndex.value === index) ? null : index ;
  }
  

  • Assign the function to the click event, then use the expression activeIndex === index for the v-if directives.

  I hope this helps.

  HAPPY CODING 😁

  Marked as helpful

  1