Elementor: Prevent Popup From Closing on Toggle Widget Click

Smart Web Creative - 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

Use Gmail for Webmail Accounts

If you use Gmail and you have a Webmail account, you can actually use Gmail for your Webmail accounts. There are some benefits, but also drawbacks to using this setup. It is important though that before you take the following steps, you ensure that your DNS records have the correct

Read More »

How To Close A Mobile Popup Menu in Elementor for a One-Page Site

If you’re making a one-page / landing page site and want to have the mobile popup menu close after clicking on a link, copy the following code: <!– Close Popup once anything within popup is clicked. –> <script> jQuery(function($){ $(document).on(‘click’,’.elementor-location-popup a’, function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }); }); </script> Now, paste

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

Let's Get Some Info