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

**URL:** <https://forum.builder.io/t/how-to-open-the-first-accordion-item-by-default-in-builder-io/5633>\
**Category:** CMS\
**Tags:** accordion\
**Created:** [May 21, 2024, 12:51pm UTC](https://forum.builder.io/t/how-to-open-the-first-accordion-item-by-default-in-builder-io/5633 "2024-05-21T12:51:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 21, 2024, 12:51pm UTC](https://forum.builder.io/t/how-to-open-the-first-accordion-item-by-default-in-builder-io/5633/1 "2024-05-21T12:51:35Z")

</div>

If you are using [Builder.io](http://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](http://Builder.io).
2. Go to **Edit Content JS + CSS**.
3. Insert the following code snippet, which will trigger the `onClick` event upon page load:

```auto
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:

```auto
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,