Is it possible to make the first accordion in a mobile view be opened by default using Webflow?
Note FlowSuggest is not affiliated with Webflow. For official help, visit the Webflow community.
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:
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.
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.
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".
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>- 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:
- How can I make an accordion in Webflow?
- Can I customize the design of the accordion in Webflow?
- Is it possible to have multiple accordions on a single page in Webflow?