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

Smart Web Creative - Knowledge Base Article - How To Flush DNS Cache Locally

How To Flush DNS Cache Locally

Troubleshooting website issues can be challenging, especially when you’re unsure where to begin. One common issue is a corrupt local DNS cache, which can prevent your computer from reaching specific websites or servers. In this guide, Smart Web Creative will show you how to clear or flush DNS cache locally

Read More »

Content Writing Tips

If you are writing content for your website, it can be at times challenging. There’s a specific format that you should write content for your site. If you want to write some particular information on your website that pertains to your businesses or service, there are some ways to do

Read More »

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

Let's Get Some Info

Let's Get Some Info