Element CSS stopped working

[cathaloregan]

The Element CSS below has stopped working following updating to the latest version of Cornerstone and X-theme:

a#content-area-modal-4-anchor-toggle {
display: none;
}

Grateful for any points about what the issue is. Thanks

[ruenel]

Hello Cathal,

Thanks for writing in! Are you using the dynamically generated element ID? The ID might have changed after the update. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

[christian]

Hey Cathal,

I’m not sure if we made the content-area-modal-4-anchor-toggle as an ID to the toggle but right now, the selector should be [aria-controls="content-area-modal-4-modal"]. That’s using the CSS attribute selector, in case you’re not aware. You can also use the class toggle-content-area-modal-4

Regarding the jQuery, there is not element with in-page-filter-anchor-toggle ID. Your code is also incorrect though it may work. We cannot explain deeper what’s the correct code though as that is beyond the scope of theme support.

I’d recommend you inspect the elements again or revert your site to the previous version and compare the HTML structure between the previous version and the new one so you can update your CSS and JS accordingly.

Thanks.

[cathaloregan]

Hi Christian,
I’ve solved the first problem. I changed the Element CSS code from

 a#content-area-modal-4-anchor-toggle {
 display: none;
 }

to the following:

$el.x-anchor-toggle {
    display: none;
}

which achieves the desired result, although I still don’t understand why the original code stopped working.

The second part of the problem is how to trigger the content area modal using something other than the default toggle (which is now hidden, as per code above.)

I previously received guidance from your colleague last year (see here: Triggering off-page content modals from links), and thanks to that help have since been using this code:

jQuery( function($){

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

which up until very recently was working perfectly, but has now ceased to work (along with all other js). Any guidance you can give me would be very welcome! Thanks

[ruenel]

Hello Cathal,

The Javascript no longer works because element ID content-area-modal-4-anchor-toggle can no longer be found on the page. As what have pointed by @christian, the JS code needs to be modified and make it like this:

jQuery( function($){

	$('.toggle-content-area-modal-4').on( 'touchend click', function(e){
        e.preventDefault();
    	$('[aria-controls="content-area-modal-4-modal"]')[0].click();
    });
});

The code should work assuming that a button with a class toggle-content-area-modal-4 will trigger to open the modal content that bears the selector: [aria-controls="content-area-modal-4-modal"]

The code above serves as an example code to get you started with.

Hope this makes sense.

[cathaloregan]

Hi - thanks so much, that works perfectly! Cheers, Cathal

[matt]

Glad to hear that, Cathal!