This short tutorial will show you how to display your hidden content/text when a button, image, or link is clicked.
Step 1
First, you’ll want to call jQuery by inserting this code in between your <head></head> tags.
[code language=”javascript”]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
[/code]
Step 2
Second, you’ll want to call the function that displays the hidden content when your button is clicked. Insert the code below in between your <head></head> tags, and make sure it comes after the jQuery code above.
[code language=”javascript”]
<script type="text/javascript">
function showItScroll() {
document.getElementById("hid").style.display = "block";
jQuery(‘html, body’).animate({
scrollTop: jQuery("#hidden-content-anchor").offset().top
}, 1000);
};
</script>
[/code]
Step 3
Next, wrap your hidden content in a DIV with an ID named “hid”. Then add an inline style to make this DIV hidden – style=”display:none;” . We also add an anchor (named “hidden-content-anchor”) – adding an anchor link is nice if your hidden content is further down on your page. This way, your page will scroll nicely (when the link is clicked) down to your hidden content that is now visible.
[code language=”html”]
<div id="hid" style="display:none;">
<a id="hidden-content-anchor"></a>
<p>This is your hidden content</p>
<p>This is your hidden content</p>
<p>This is your hidden content</p>
<p>This is your hidden content</p>
<p>This is your hidden content</p>
</div>
[/code]
Step 4
Last, let’s create the link that will be clicked on. We’ll link the tex to our anchor (#hidden-content-anchor), then add an onclick action.
[code language=”html”]
<p><a href="#hidden-content-anchor" onclick="showItScroll(); return false;">Click Here</a> to display hidden content.</p>
[/code]
Your Final Code
After you are all done, your code should look like this:
[code language=”html”]</pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showItScroll() {
document.getElementById("hid").style.display = "block";
jQuery(‘html, body’).animate({
scrollTop: jQuery("#hidden-content-anchor").offset().top
}, 1000);
};
</script>
</head>
<body>
<p><a href="#hidden-content-anchor" onclick="showItScroll(); return false;">Click Here</a> to display hidden content.</p>
<p> </p>
<p> </p>
<p> </p>
<div id="hid" style="display:none;">
<a id="hidden-content-anchor"></a>
<p>This is your hidden content that will display when the link above is clicked.</p>
<p>This is your hidden content that will display when the link above is clicked. </p>
<p>This is your hidden content that will display when the link above is clicked. </p>
<p>This is your hidden content that will display when the link above is clicked. </p>
<p>This is your hidden content that will display when the link above is clicked. </p>
</div>
</body>
</html>
<pre>[/code]
Demo
Click here to see a live demo.
Author
Contents