How to Display Dynamic Content on a Page Using URL Parameters

In this tutorial, I will show you how to show/hide dynamic content based on URL parameters for any web page. This solution uses HTML, CSS and JavaScript instead of backend coding, so you will be able to use it with Marketo, Pardot, or any other system that allows a bit of custom code.

View Demo

The HTML

Wrap each one of your dynamic content sections in a DIV and add a class called dynamic-content. Also, give each DIV a unique ID. We will reference these later in the JavaScript.

<!-- Default Dynamic Section -->
<div id="default-content" class="dynamic-content">
  This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="apples" class="dynamic-content">
  I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="oranges" class="dynamic-content">
  I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="bananas" class="dynamic-content">
  I like bananas
</div>

This is the default content

</div>

I like apples

</div>

I like oranges

</div>

I like bananas

</div>

The CSS

There’s only one line of CSS needed to hide all the elements on the page since JavaScript will be used to show/hide the content.

.dynamic-content {
    display:none;
}

.dynamic-content {

display:none;

}

The JavaScript

This is the complicated part. First, we need to parse the URL and check for a specific parameter. For this example I will be using the parameter name “dc”, so in this case, my URL would look like this:

https://jennamolby.com/my-webpage?dc=mycontent

This is the piece of code to parse the URL. You can change “dc” to be whatever parameter name you want.

// Parse the URL parameter
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('dc');

// Parse the URL parameter

function getParameterByName(name, url) {

if (!url) url = window.location.href;

name = name.replace(/[\[\]]/g, "\\$&");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, " "));

}

// Give the parameter a variable name

var dynamicContent = getParameterByName('dc');

Use jQuery to show/hide content

To make things easier, we’ll use jQuery to show/hide the content, in conjuction with the javascript. You can add in as many conditions as you want, just make sure you always include default content just in case parameters are misspelled or not in the URL.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	// Check if the URL parameter is apples
	if (dynamicContent == 'apples') {
		$('#apples').show();
	} 
	// Check if the URL parameter is oranges
	else if (dynamicContent == 'oranges') {
		$('#oranges').show();
	} 
	// Check if the URL parameter is bananas
	else if (dynamicContent == 'bananas') {
		$('#bananas').show();
	} 
	// Check if the URL parmeter is empty or not defined, display default content
	else {
		$('#default-content').show();
	}
});
</script>

$(document).ready(function() {

// Check if the URL parameter is apples

if (dynamicContent == 'apples') {

$('#apples').show();

}

// Check if the URL parameter is oranges

else if (dynamicContent == 'oranges') {

$('#oranges').show();

}

// Check if the URL parameter is bananas

else if (dynamicContent == 'bananas') {

$('#bananas').show();

}

// Check if the URL parmeter is empty or not defined, display default content

else {

$('#default-content').show();

}

});

</script>

The full javaScript code

Here’s the full piece of javascript and jQuery code.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
	// Parse the URL parameter
	function getParameterByName(name, url) {
	    if (!url) url = window.location.href;
	    name = name.replace(/[\[\]]/g, "\\$&");
	    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
	        results = regex.exec(url);
	    if (!results) return null;
	    if (!results[2]) return '';
	    return decodeURIComponent(results[2].replace(/\+/g, " "));
	}
	// Give the parameter a variable name
	var dynamicContent = getParameterByName('dc');

	 $(document).ready(function() {

		// Check if the URL parameter is apples
		if (dynamicContent == 'apples') {
			$('#apples').show();
		} 
		// Check if the URL parameter is oranges
		else if (dynamicContent == 'oranges') {
			$('#oranges').show();
		} 
		// Check if the URL parameter is bananas
		else if (dynamicContent == 'bananas') {
			$('#bananas').show();
		} 
		// Check if the URL parmeter is empty or not defined, display default content
		else {
			$('#default-content').show();
		}
	});
</script>

// Parse the URL parameter

function getParameterByName(name, url) {

if (!url) url = window.location.href;

name = name.replace(/[\[\]]/g, "\\$&");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if (!results) return null;

if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, " "));

}

// Give the parameter a variable name

var dynamicContent = getParameterByName('dc');

$(document).ready(function() {

// Check if the URL parameter is apples

if (dynamicContent == 'apples') {

$('#apples').show();

}

// Check if the URL parameter is oranges

else if (dynamicContent == 'oranges') {

$('#oranges').show();

}

// Check if the URL parameter is bananas

else if (dynamicContent == 'bananas') {

$('#bananas').show();

}

// Check if the URL parmeter is empty or not defined, display default content

else {

$('#default-content').show();

}

});

</script>

View Demo

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Krishna Teja says:

December 19, 2017 at 8:14 am

How can I add fade in fade out effect to this div contents?
- Jenna Molby says:
  
  December 19, 2017 at 9:20 am
  
  Hi Krishna, instead of $(‘#oranges’).show(); you can use $(‘#oranges’).fadeIn();
mandy says:

September 18, 2017 at 10:00 pm

thank you so much… u solved my language translation task
Jay says:

August 28, 2017 at 10:53 am

This was very helpful.
Brenda says:

August 25, 2017 at 12:53 pm

This was amazing and solved my problem! Thank you so much!
Miroslav says:

August 4, 2017 at 3:42 am

Hi Jenna! This code is fantastic. I have implemented it and been using it with success.

I have a question:
What to do when there are more parameters in URL?

For example, I need to add UTM parameters to the url, along with it:

http://www.example123123.com/?utm_source=social&utm_medium=facebook&utm_campaign=campaign-name&dc=mycontent

Unfortunately, the hidden section that should be shown, doesn’t get displayed in this case.
Is there any easy code tweak that could make this working?

Thank you!

Comments are closed.

The HTML

The CSS

The JavaScript

Use jQuery to show/hide content

The full javaScript code

Questions?

22 Comments

Related Posts

How To Use UTM Parameters to Capture Lead Source