Is it possible to make the first accordion in a mobile view be opened by default using Webflow?
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?