Is it possible to make the first accordion in a mobile view be opened by default using Webflow?

Published on
September 22, 2023

Yes, it is possible to make the first accordion in a mobile view be opened by default using Webflow. By default, accordions in Webflow are set to be closed. However, you can use a custom code to override this default behavior and make the first accordion item open automatically. Here's how you can do it:

  1. Add an accordion element to your page: Start by adding an accordion element to your page. You can find the accordion element in the "Symbols" panel on the right-hand side.

  2. Set up your accordion items: Inside the accordion element, add the desired number of accordion items. Each item will consist of a header and a panel. The header is what users will click on to expand or collapse the panel.

  3. Give each accordion item a unique ID: Select each accordion item, go to the "Settings" panel on the right-hand side, and under "Accordion Item ID," give each item a unique ID. For the first accordion item, set the ID as "item-1".

  4. Add custom code to your site: Go to the "Custom Code" section in your Webflow project settings. Here, you can add custom code that will be applied to your entire site. Add the following code snippet:

<script>document.addEventListener('DOMContentLoaded', function() {    const firstAccordionItem = document.querySelector('#item-1'); // Change this ID to match the one you set in Step 3    firstAccordionItem.classList.add('w--open');});</script>
  1. Publish your site: Once you've added the custom code, publish your site to see the changes in action. When the page loads on a mobile device, the first accordion item should be open by default.

By following these steps, you can make the first accordion item open by default in a mobile view using Webflow.

Additional Questions:

  1. How can I make an accordion in Webflow?
  2. Can I customize the design of the accordion in Webflow?
  3. Is it possible to have multiple accordions on a single page in Webflow?