Content Area Modal open on click

[XSO]

Hello,
I have tried to follow this thread https://theme.co/apex/forum/t/trigger-the-opening-of-content-area-from-some-other-element/51054/2 in an attempt to have text (link) open my CAM.
In the header (any page) you can see the text “Contact Us”, this is the text that I want to open (when clicked) the CAM.
Please disregard the button in the header. That is just there for reference and will be removed.
Unfortunately, I have been unsuccessful and any help would be appreciated.
Login info, etc included in secure note.

[rad]

Hi @XSO,

Thanks for reaching out.

I’m not sure which link should be opening the CAM, would you mind providing the details? The button itself is the CAM trigger, I need to find where is the proxy link first. The code may depend on what kind of link it’s, like if it’s button too, or menu, and so on.

Thanks!

[XSO]

Hi Rad,

In the top-upper left (header) you will see a button (please disregard this)
Then to the right of this (middle of header) you will see “Contact Us” followed by a phone number and email address
The “Contact Us” text is what I would like to open the CAM
When they click “Contact Us” it should open the CAM (just like the button mentioned above).

[rad]

Hi @XSO,

Ah, thanks for the clarification, the javascript code you need is this

jQuery( function($){

	$('.open-modal-button').on( 'click', function(e){
        e.preventDefault();
		$('a.e146-3.x-anchor.x-anchor-toggle').trigger('click touchend touchstart');
	});

});

You also have missing s from your link code

<a clas="open-modal-button" href="#">Contact Us ● </a>

Please change it to this

<a class="open-modal-button" href="#">Contact Us ● </a>

Hope this helps.

[XSO]

@Rad
I did the changes you requested and see no difference
It still does not open the CAM.
I will temporarily hide the button (for aesthetic reasons).

[rad]

Hi @XSO,

You have removed the modal element, the button on top-upper left header. It’s the very important part of this setup since the “Contact Us” link is just a proxy that will trigger that modal element button. You should have hide it instead of removing it, I can’t find it even by viewing the source code of the site. I thought you mean that it will be removed is by hiding it, like just removing it from view.

This $('a.e146-3.x-anchor.x-anchor-toggle') is the selector for that button on top-upper left.

Thanks!

[XSO]

Hi @Rad,

I have placed the button element back in the Header and not hidden it via Pro (it is hidden due to the class “my-content-area-1” as mentioned in this thread https://theme.co/apex/forum/t/trigger-the-opening-of-content-area-from-some-other-element/51054/2.
Would you please take a look again … ?
The link does not open the CAM.

Thank you for your patience.

[jade]

Hey @XSO,

Since you have already set an ID to the Content Area Modal element, you can make use of the ID instead to target the default trigger of the element.

So using the Chrome Development code inspector tool, you can see that the ID set to the actual trigger of the content area modal element is : my-content-area-1-anchor-toggle which you can use to reference it in the jQuery code.

Then please update the JS code to:

jQuery( function($){

	$('.open-modal-button').on( 'click', function(e){
        e.preventDefault();
	    $('#my-content-area-1-anchor-toggle')[0].click();
	});

});

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[XSO]

Thank you @Jade
I have implemented the changes as you suggested and it worked one time (in the PRO builder I think).

I am still trying to figure out why… —EDIT— I had a typo

One last thing…
Can I move the referenced button (that’s hidden) to the page (not the header) and still have this code work?
I would rather hide this button on the page (so the header elements stay aligned).

Thank you so much.

[jade]

Hi @XSO,

Yes, you should be able to move the Content Area Modal element anywhere as long as the ID remains the same.

Hope this helps.