How to close accordions by default in Elementor when the page loads
Tested March 2023 and working on desktop, tablet and mobile
Using Elementor Pro
Before
After
Works on Desktop, tablet and mobile
- Add a html widget to the page with the accordion
- Copy and paste the code below
- Press update
<style class="accordion-closed-on-load">body:not(.elementor-editor-active) .elementor-widget-accordion .elementor-tab-content {
display: none!important;
}</style> <script src="data:text/javascript;base64,d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLGZ1bmN0aW9uKCl7c2V0VGltZW91dChmdW5jdGlvbigpe2RvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5hY2NvcmRpb24tY2xvc2VkLW9uLWxvYWQnKS5yZW1vdmUoKTtsZXQgYWNjb3JkaW9uc0VsZW1zPWRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJy5lbGVtZW50b3Itd2lkZ2V0LWFjY29yZGlvbicpCmFjY29yZGlvbnNFbGVtcy5mb3JFYWNoKGU9PntsZXQgYWN0aXZlVGl0bGU9ZS5xdWVyeVNlbGVjdG9yKCcuZWxlbWVudG9yLXRhYi10aXRsZS5lbGVtZW50b3ItYWN0aXZlJyk7bGV0IGFjdGl2ZUNvbnRlbnQ9ZS5xdWVyeVNlbGVjdG9yKCcuZWxlbWVudG9yLXRhYi1jb250ZW50LmVsZW1lbnRvci1hY3RpdmUnKQpqUXVlcnkoYWN0aXZlQ29udGVudCkuaGlkZSgpO2FjdGl2ZVRpdGxlLmNsYXNzTGlzdC5yZW1vdmUoJ2VsZW1lbnRvci1hY3RpdmUnKTthY3RpdmVDb250ZW50LmNsYXNzTGlzdC5yZW1vdmUoJ2VsZW1lbnRvci1hY3RpdmUnKTthY3RpdmVDb250ZW50LnNldEF0dHJpYnV0ZSgnaGlkZGVuJywnaGlkZGVuJyk7YWN0aXZlVGl0bGUuc2V0QXR0cmlidXRlKCdhcmlhLWV4cGFuZGVkJywhMSk7YWN0aXZlVGl0bGUuc2V0QXR0cmlidXRlKCdhcmlhLXNlbGVjdGVkJywhMSk7YWN0aXZlVGl0bGUuc2V0QXR0cmlidXRlKCd0YWJpbmRleCcsLTEpfSl9LDEwMCl9KQ==" defer></script>
Html widget
Add Html widget to page
Paste the code on the left
