Toggle doesn’t work in Elementor’s popup

I have done some investigation.
So when the page is load, Elementor popup is not present in DOM, once the popup is fired (by button etc), the popup is shown in DOM at the end of page.

I tried to set display conditions – show popup at page load with 0 seconds delay, but still doesn’t work. Most probably the bellows init comes before the popup si loaded. I don’t know how can I reinitialize the bellows javascript when clicked the icon ??

Hi Lukas,

I believe you are exactly right – I’ve seen this before with Elementor’s popup. They move the nodes within the DOM as you mentioned, and in the process they drop all of the event listeners, so the JS stops working.

From their doc here, it looks like you can hook in when the popup opens:

https://developers.elementor.com/elementor-pro-2-7-popup-events/

Then you can re-initialize Bellows using this JS within the callback:

jQuery( '.bellows' ).bellows();

I’d recommend only calling it once so you don’t reinitialize every time the popup is opened (either by using once() instead of on() or by removing the event listener after it’s executed).

Hope that helps! ??

Sorry, that should be “one()”

jQuery( document ).one( 'elementor/popup/show', () => {
	jQuery( '.bellows' ).bellows();
} );

Hello, your code particullary works, thank you!
However, those two features doesn’t work ??
https://snipboard.io/pqfMV1.jpg

The “Single” feature is too important for me, without it I could use default Elementor nav menu, but client wanted to have only single sublist opened.

Could we please do something with it?

And also on current sub-category the expander doesn’t work as well ??
Try on this link: https://vodnefiltre.lavadesign.sk/kategoria-produktu/filtre-atlas/hydra/s-pe-vlozkou-90-mcr/
please, try to open “Filtre pod?a vyrobcu”
It looks like only chevron change, but no submenu appears.

You’re welcome, Lukas ??

Those settings work in all my local tests. There may be some other JS interference as above, I’m not sure. I don’t have a way to troubleshoot your site without access to the code. You may want to try testing out the menu outside of the popup element to see if that is affecting things.

As for that specific page, Bellows does the same thing on every page, so if something different is happening on that page, it means that there is some code specific to that page affecting things. In this case, it appears that there is other JS on your site acting on the menu, adding inline CSS styles to the menu elements which is hiding the submenu

You’ll need to stop whatever JS is acting on the menu from doing so to prevent that. Unfortunately Bellows can’t prevent other JS from acting on it.

Also, after reviewing the second question and finding that other JS is affecting the menu, I’m guessing that that is likely what is also keeping multiple submenus open at the same time in the first question.

Hope that helps!

Hi friend. Javascript is not my best skill, so I was unable to resolve this issue by your advices. However I used some power addons for elementor plugin, or something like that, put the “Off Canvas” element to the header and put the bellows menu widget into it. Works like a boss ?? Thank you.. .

To future: Didn’t you think about hiding product categorie’s description? I need to display: none; them ??

Hi Lukas,

Glad to hear you got it sorted in a separate element, sounds like it was JS from the popup causing the issue ??

Bellows won’t display descriptions by default, it only displays what is entered in the menu item settings. Either you need to delete them there, or something else is adding them into the menu item settings automatically ??