Leave accordion open on desktop close on mobile

Resolved Artan
(@artankrasniqi1988)

2 years, 1 month ago

Hi,

how to show accordion opened on desktop but closed on mobile (example below 768px). Can´t see option. It´s either closed or opened no matter which screen size. Tried to workaround with CSS to force it opened on Desktop but there is really nothing u can do. It seems like the content is magically disappearing after accordion is closed and there is no CSS like “display: none” or “visibility: hidden”.

With the old accordion you could at least workaround yourself but with this it´s not possible. Would appreciate a code snippet for this if you can send me one please.

Thanks and regards

Viewing 3 replies - 1 through 3 (of 3 total)

aracelil
(@aracelil)

2 years, 1 month ago

Hi, @artankrasniqi1988!

Thanks for reaching out. Currently, the ability to set the Accordion widget to “closed” on mobile is not a native feature. While we strive to assist our users to the best of our ability, implementing custom code falls outside the scope of Elementor support. We recommend joining our Elementor Community where our tens of thousands of members may be able to help you create or troubleshoot custom code.

Kind Regards,
benjcampbell
(@benjcampbell)

2 years ago
Hey @artankrasniqi1988 I came across your post trying to figure this out myself, but ended up finding a temp/hacky solution for this until Elementor adds this functionality 🙂
```
<script>
if (window.matchMedia('(max-width: 768px)').matches) {
    // Select all accordion items
    var accordionItems = document.querySelectorAll('.e-n-accordion-item');

    // Loop through each accordion item
    accordionItems.forEach(function(item) {
        // Close the accordion item
        item.removeAttribute('open');
    });
}

</script>
```
I’ve got this in a HTML block on the page, and works for two separate accordions that I have on the page! Good luck 🙂
Thread Starter Artan
(@artankrasniqi1988)

2 years ago

Hi @benjcampbell,

wow, pretty cool! 🙂 Thanks a lot for sharing your work here. This is perfect!

Now I can finally leave some accordions closed on mobile where there is limited space and opened on desktop where place is not such a problem!

Perfect for responsible designs. Hope Elementor sees the necessity for this feature as it gives more precise handling of layouts.

Cheers and regards! 😉

Artan

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Leave accordion open on desktop close on mobile’ is closed to new replies.

Tags