How To Display Your Hidden Content When a Button is Clicked

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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

  • Chris Darling

    Chris is a busy mom of two, who loves to tinker with computers and read in her free time. Her knowledge of what it takes to start up a business especially businesses that operate on the internet has helped many people from around the world. Chris often shares her experience as an online entrepreneur and business coach, speaking at events all over about how she created multiple successful businesses and profitable websites. She also offers advice on how people can build their own business website or blog for very little money, while still maintaining quality content.

Contents

You May Also Like