Trigger the opening of Content Area from some other element

Support
#1

Hi there,

I realize that my question is a bit “out of field” of the core functionality but I would really appreciate if you can give some initial pointers or help on how to do this. I can then figure out the rest of the details on my own. Here is what I want to accomplish:

  1. Assume that I have a Content Area Modal element on a page which has an ID (provided in the Customize property set of the element) of my-content-area-1.

  2. I have another Raw Content element on the same page where I put some HTML text. Inside that text is a link which says “Click here to open modal”. When I click that link, the my-content-area-1 should open. Ideally, I should be able to trigger it with the my-content-area-1 name but if necessary I can refer to it through any other ID or mechanism you recommend as well.

  3. I can create any JS or CSS on this page (or as part of the Theme Options) if necessary. Also, I can involve a developer to do this work but the developer is not familiar with Pro. So, any basic pointers or help on how to do the above “wiring” will be very helpful.

  4. One last point, I am familiar with the Convert Plus plugin and know that I use that plugin for this capability. But for a variety of reasons (too complicated to explain here) I cannot use that approach.

Thanks in advance!

NOTE: By the way, I think this capability will be quite useful for content area elements in general so you should put it on a requested feature list :slight_smile:

#2

Hi Misha,

Thank you for reaching out to us. If you’ve added an ID my-content-area-1 to your Content Area Modal element then first hide it’s toggle button by adding the following code in the Theme Options > CSS:

a#my-content-area-1-anchor-toggle {
    display: none;
}

Then the element you’ve added that says “Click here to open modal” give it a class e.g open-modal-btn and then add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.open-modal-btn').click(function(){
		$('a#my-content-area-1-anchor-toggle').click()
	});
});

This should open up the Content Area Modal with an external element.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Thanks!

1 Like
Trigger opening of my Content Area from container
#3

@Nabeel

Thanks! It worked exactly as I wanted it to.

Appreciate the quick reply.

#4

Glad to hear that. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.