Elementor: Prevent Popup From Closing on Toggle Widget Click

Michael Pothos Design - Elementor: Prevent Popup From Closing on Toggle Widget Click

You may find it difficult when having the toggle widget from Elementor within a popup. You will notice that every time you click on the text of the tab title in the toggle widget, it will close the popup that the widget is in. However, you can prevent the Elementor popup from closing on the toggle widget click by adding some Javascript code to your page. This is a great workaround, especially if you have FAQs within your Elementor popup.

To make this work, you will need to add an HTML widget to your page or within the popup somewhere. Copy the following code and paste it into your HTML widget:

<script>
jQuery( document ).ready(function( $ ){
$(".elementor-tab-title a").replaceWith(function() {
return "<span>" + this.innerHTML + "</span>";
});
});
</script>

What this code does is it targets the link within the toggle tab title and replaces it with a span. The main issue is that the link within the popup is set to close the popup by default. We need to then trick Elementor that there is no “<a>” tag, but instead a “<span>”. Now you should know how to prevent the Elementor popup from closing on the toggle widget click.

Additionally, you can add a little more code to style your span since it won’t look like the original tab title.

Other Helpful Articles

Transferring Large Files

Sometimes when you have a designer or developer work on a project, you may have to send over large files to them. It is difficult for some people to send large files, especially if they aren’t tech savvy. Some of these large files might be for some graphic design project,

Read More »

What Do You Need Done?:

(Please check all that apply)

Tell Us About You

Almost Done!

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info