Helpful resources
            
           
              Need more help?
             
             
              Check out the Webflow community.
             
            
              Free Webflow templates
             
             
              The best free Webflow templates.
             
            
              Hire a Webflow expert
             
             
              Partner with a certified expert.
             
            Do you know how to set up custom code to auto-expand a dropdown on page load in Webflow?
             Published on
            
            
             September 22, 2023
            
           Yes, I can help you with that. To set up custom code to auto-expand a dropdown on page load in Webflow, follow these steps:
- Go to your Webflow project and open the Designer.
 - Navigate to the page where you want to auto-expand the dropdown.
 - Select the dropdown element by clicking on it.
 - In the right sidebar, go to the Settings tab.
 - Under the Element Settings section, give your dropdown element a unique class name. This will allow us to target it with custom code.
 - Save your changes and go to the Project Settings in the top-right corner of the Designer.
 - In the Project Settings, select the Custom Code tab.
 - 
             Under the Head Code section, paste the following code, replacing
             
dropdown-classwith the unique class name you assigned to your dropdown element: 
<script>    window.addEventListener('DOMContentLoaded', function() {        document.querySelector('.dropdown-class select').value = 'expanded-option';    });</script>
           - Save your changes and publish your site.
 - Now, whenever the page loads, the dropdown will automatically show the selected option.
 
            Please note that in the provided code snippet, you need to replace
            
             expanded-option
            
            with the value of the option you want to have selected by default.
           
Remember to test your website after implementing the custom code to ensure that the dropdown expands as expected during page load.
Additional questions:
- How do I add custom code to my Webflow site?
 - Can I use JavaScript to manipulate elements in Webflow?
 - What are some other customizations I can make with custom code in Webflow?