Creating an FAQ Section with Open Default First Card

·

I’m curious - how would you create an FAQ section where the first card is open by default? Please note this will be coming from CMS. CC: Matt J.

3 comments

· Sorted by Oldest

Ganesh U.
·
·
Maybe create a separate combo class / interaction for first card alone

Yasen V.

·

In Webflow, I've added a Code element at the bottom of the FAQ that does this after 3 seconds. It's written in a way that works even if there are multiple FAQ components on the page.

<script>
setTimeout(() => {
  document.querySelectorAll(".faq-wrapper").forEach(wrapper => {
    const firstItem = wrapper.querySelector(".faq-item:first-of-type .faq-question-text");
    if (firstItem && !firstItem.dataset.clicked) {
      firstItem.click();
      firstItem.dataset.clicked = "true";
    }
  });
}, 3000);
</script>

Hope this helps.

Aurelien S.
·
·
Leverage the custom element. Here is a tutorial: https://www.youtube.com/watch?v=Jfw3VUyDSWI You can have an attribute to indicate which one should be first. If it's from the CMS you would just have one line of custom CSS

Ganesh U.
·
·
Maybe create a separate combo class / interaction for first card alone

Yasen V.

·

In Webflow, I've added a Code element at the bottom of the FAQ that does this after 3 seconds. It's written in a way that works even if there are multiple FAQ components on the page.

<script>
setTimeout(() => {
  document.querySelectorAll(".faq-wrapper").forEach(wrapper => {
    const firstItem = wrapper.querySelector(".faq-item:first-of-type .faq-question-text");
    if (firstItem && !firstItem.dataset.clicked) {
      firstItem.click();
      firstItem.dataset.clicked = "true";
    }
  });
}, 3000);
</script>

Hope this helps.

Aurelien S.
·
·
Leverage the custom element. Here is a tutorial: https://www.youtube.com/watch?v=Jfw3VUyDSWI You can have an attribute to indicate which one should be first. If it's from the CMS you would just have one line of custom CSS