jQuery if url hash, click event/activate javascript

Question

So from the home page, i have a link that goes to a products listing page. The product page has expand/collapse divs.

I need the appropriate div to expand depending on what the url# is.

So the link on the homepage is

<a href="/out-products.php#healthysnacks">healthy snacks</a>

when i click the link above, i am trying to activate this, on the product page:

<a href="javascript:ReverseDisplay('products4')" id="healthysnacks"> Healthy Snacks</a>

I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js. Please any insight would help.

thanks

Solution 1

You can make the following changes in the document ready function of your product page:

Simple fix: Since the jQuery id-selector is #elementId, you can simply use the window.location.hash value as your id selector, and use it to target the desired element.

if ( window.location.hash ) {
    $(window.location.hash).click(); //clicks on element specified by hash
}

Better: In addition to the above, take the js out of your markup.

$('#healthysnacks').click(function(e) {
    e.preventDefault();
    ReverseDisplay('products4');
});

Then, after doing this, use the $(window.location.hash).click() code from above. Also, change your link to:

<a href="#" id="healthysnacks"> Healthy Snacks</a>

Solution 2

You can use the hash property of the Location object, try the following:

$(document).ready(function(){
   var id = window.location.hash;
   $(id).trigger('click')
})

As you are using jQuery instead of using javascript: protocol, you can use the jQuery click method:

$('#healthysnacks').click(function() {
   // do something here
})

Solution 3

The answers suggested here are valid, but...

Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.

For example

http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>

If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.