Jul
8
2015

Reveal Hidden Content Using Hash in URL

Suppose you have a web page that provides details on a given product.  The page has preloaded a number of products in HTML, but they are hidden from viewing via jQuery hide method.  If a user clicks a product link on the page, then the jQuery show method explicitly reveals it.  Now the user visits the page from another with a hash in URL like http://yoursite.com/products#shoes and the desired result is to automatically reveal the details for that product?  That was a question posed recently at StackOverflow, and this is how I answered it:

The key line of code above is line 11 of jqueryHash snippet. If the URL ended with #shoes, the details for that product would be automatically revealed. Note the code snippet does not do any validation of the hash (for brevity).

There were a number of answers given at the StackOverflow post, each with merit.  You can test my answer at my codepen testing grounds.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
blog comments powered by Disqus

Resources

Archives