How to hide or show content based on links or urls via JavaScript/jQuery

I have received many requests for a tutorial that shows how to hide or show content based on links or options that a user picks and reflected on a different page so here it is =)

You can see a working demo here.

Here is the plain HTML:

If you had to choose a drink, what would you choose:
<ul>
	<li><a href="/demo/demo-show-hide-based-on-url.html?option=coke">Coke</a></li>
	<li><a href="/demo/demo-show-hide-based-on-url.html?option=bubble-tea">Bubble Tea</a></li>
	<li><a href="/demo/demo-show-hide-based-on-url.html?option=milk">Milk</a></li>
</ul>

It is a simple list of options for a user to select and the key is in the linking url. There is an option parameter where we are passing over the user’s selected option. The option values (coke, bubble-tea, and milk) will map to their respective div ids on the following page that we will dynamically hide or show.

Here is the JavaScript/jQuery code that executes on the linking page:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var option = 'coke';
	var url = window.location.href;
	option = url.match(/option=(.*)/)[1];
	showDiv(option);
});
function showDiv(option) {
	$('.boxes').hide();
	$('#' + option).show();
}
</script>

Line 1 imports the jQuery library from Google’s content distribution network (CDN). There are a couple of reasons why you should use CDNs including decreased latency and increased parallelism. If you are interested in reading the details, here is a nice post.

Line 4 assigns the default div id that will be shown which in this case is coke.

Lines 5-6 parses the option value from the url information.

Line 7 calls the showDiv() function and passes the option value as an argument.

In line 10 of the showDiv() function, we hide all the divs in case there are any that are opened. We do this using the jQuery class selector where we select all the elements with the boxes class.

Line 11 will use the id (e.g. #) jQuery selector using the option parameter that was passed over and show the element via the jQuery .show() method.

Here is the HTML code for the second page with our dynamic displayed content:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="boxes" id="coke">Coke is awesome!</div>
<div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
<div class="boxes" id="milk">Milk is healthy!</div>
<p>
	I change my mind:
	<ul>
		<li><a href="javascript:showDiv('coke')">Coke</a></li>
		<li><a href="javascript:showDiv('bubble-tea')">Bubble Tea</a></li>
		<li><a href="javascript:showDiv('milk')">Milk</a></li>
	</ul>
</p>
<a href="/demo/demo.html">Back to main page</a>

We begin with the divs, each with their respective ids (coke, bubble-tea, milk). We then re-list our options on this page as well. The links here do not link to another page though. Instead, they call the showDiv() function and pass over the selected option.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers! OR…you can sign up for a free Dropbox account using my referral link =) If you are not aware of what Dropbox is, it is the most awesomest online backup application there and so much more…all for free.