How to Open the First Accordion Item by Default in Builder.io

Technical Questions CMS
1

If you are using Builder.io’s default accordion component and want to open the first accordion item by default, there isn’t a built-in method for this. However, you can achieve this by triggering the onClick event for the first accordion item title using a custom JavaScript snippet.

Steps to Implement the Solution:

  1. Navigate to the Data tab in Builder.io.
  2. Go to Edit Content JS + CSS.
  3. Insert the following code snippet, which will trigger the onClick event upon page load:
setTimeout(function () {
  var accordion = document.querySelector('.builder-accordion');
  // Get the accordion title element
  var firstAccordionTitle = accordion.querySelector('.builder-accordion-title');

  // Simulate a click event on the firstAccordionTitle
  firstAccordionTitle.click();
}, 1000);

This code will work for the first accordion component on a content page. If you have multiple accordion components on the same page and want the first element of each accordion to open by default, use this code instead:

setTimeout(function () {
  // Get all accordion elements
  var accordions = document.querySelectorAll('.builder-accordion');

  // Iterate over each accordion
  accordions.forEach(function (accordion) {
    // Get the first accordion title element within the current accordion
    var firstAccordionTitle = accordion.querySelector('.builder-accordion-title');

    // Check if the firstAccordionTitle exists before trying to click it
    if (firstAccordionTitle) {
      // Simulate a click event on the firstAccordionTitle
      firstAccordionTitle.click();
    }
  });
}, 1000);

Hope this helps!

Thanks,