Hide and Show a Div Using Javascript

This tutorial will show you how to create a hidden Div and display it with the click of a link. There are a few reasons you may want to hide a Div in a website design. You may want to create a drop down type menu or a box that will show more information when you click a link. Another reason would be for SEO purposes. In theory hiding information in a Div is not against Google’s rules. As long as the user can still see the content when clicking a button you are not displaying different information to the user than you are to the search engine.

First we are going to start with a very basic page layout and create a 2 Divs. One will be shown and one will be hidden. Here is the starting code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Div</title>
</head>

<body>
<div id="main">This is not hidden.</div>

<div id="hidden">This is hidden.</div>


</body>
</html>

Ok now I will add some basic style to these boxes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Div</title>

<style type="text/css">
<!--
#main{
	width:500px;
	height: 20px;
	background: lightblue;
}
#hidden {
	width:300px;
	height:20px;
	background: lightgrey;
}
-->
</style>


</head>

<body>
<div id="main">This is not hidden.</div>

<div id="hidden">This is hidden.</div>


</body>
</html>

The page should look like this so far.

Now to hide the div. To do this we will change the display to none in the CSS for the #hidden div. See the code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Div</title>

<style type="text/css">
<!--
#main{
	width:500px;
	height: 20px;
	background: lightblue;
}
#hidden {
	width:300px;
	height:20px;
	background: lightgrey;
	display: none;
}
-->
</style>


</head>

<body>
<div id="main">This is not hidden.</div>

<div id="hidden">This is hidden.</div>


</body>
</html>

Now when you preview the page you will not see the Div.

In order to show the div we will need to add a Javascript function. We will pass the ID attribute of the Div to the function. Basically this means that we can use this one function to show or hide more than one Div on the same page. Below is the Javascript code that we will add the the Head section of the page.

<script language="JavaScript">
	function toggle(id) {
		var state = document.getElementById(id).style.display;
			if (state == 'block') {
				document.getElementById(id).style.display = 'none';
			} else {
				document.getElementById(id).style.display = 'block';
			}
		} 
</script>

The script above is creating the function “toggle” an passing the value “id”. Next we are using the Document Object Model to get the current state of the display attribute. Then if “display: block;” for the #hidden div we will change it to be “display: none;” else we will change the display to none.

Add the code to your page in the head just below the style.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Div</title>

<style type="text/css">
<!--
#main{
	width:500px;
	height: 20px;
	background: lightblue;
}
#hidden {
	width:300px;
	height:20px;
	background: lightgrey;
	display: none;
}
-->
</style>

<script language="JavaScript">
	function toggle(id) {
		var state = document.getElementById(id).style.display;
			if (state == 'block') {
				document.getElementById(id).style.display = 'none';
			} else {
				document.getElementById(id).style.display = 'block';
			}
		} 
</script> 


</head>

<body>
<div id="main">This is not hidden.</div>

<div id="hidden">This is hidden.</div>


</body>
</html>

Now all we have to do is create a link that will call the toggle function and pass the ID of the Div we want to toggle. We will create a link that goes no where and add the onclick property below.

<a href="#" onclick="toggle('hidden');">Toggle Div</a>

Add the link to your visible div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hidden Div</title>

<style type="text/css">
<!--
#main{
	width:500px;
	height: 20px;
	background: lightblue;
}
#hidden {
	width:300px;
	height:20px;
	background: lightgrey;
	display: none;
}
-->
</style>

<script language="JavaScript">
	function toggle(id) {
		var state = document.getElementById(id).style.display;
			if (state == 'block') {
				document.getElementById(id).style.display = 'none';
			} else {
				document.getElementById(id).style.display = 'block';
			}
		}
</script>


</head>

<body>
<div id="main">
	This is not hidden.
	<a href="#" onclick="toggle('hidden');">Toggle Div</a>
</div>

<div id="hidden">This is hidden.</div>


</body>
</html>

Save the file and test. You should not see the Div when the page loads. When you click the toggle link the hidden box will appear.

Here is an example of something you could use this for. I have a site for deals on clothing. Now if we wanted to add some quality SEO content to help the site rank we could put it in a hidden div so that it doesn’t distract the customer.

When the div is clicked it could expand with SEO rich content and links.

I know the tutorial was pretty basic, but I hope that the example above gives you an idea of how this can be used. I may also expand this into another tutorial and show you how to create a nice menu using the technique.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • Andrew Johnson

    I really like this wish I could figure out how to get this to work with an xml repeat region that I am trying to use then it would be perfect. I can’t seem to find any info on how to use something like this with an xml dataset that I am using.

  • Pingback: Hide and Show a Div Using Javascript - Blue Box Sols()

  • sam

    Hi, will the text within the divs get cached as text by google?

  • I believe that google will index the text. It should. The text is still there in the code it is just hidden from the users view, the spider should still see it.

  • Инфа что надо!

  • jade king

    Hi Im a student who seriously needs help. I got this to work its good.
    Do you no how or any tutorials for making menu’s like this?
    Im trying to make 5 visible toggle divs, one above the other on the left and 5 hidden divs layed over the top of each other in the middle of the page. I want each toggle div to make one of the hidden divs visible while making the other 4 hidden. I basically want a menu that only changes the content of this one spot on the page so that its not the whole page reloading.
    Can you help?

  • INDINAHOT

    Was ist das?

  • Thank you so much! This tutorial was amazing, and works brilliantly.

    Thanks a million. My gallery works so well now (combined with http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm).

    Wow. Thanks.

  • Bong Mendoza

    tweaked a few codes in the href to get this running with multiple hidden divs.. thanks.

  • Leib und Seele

    Very clear exposition. Very useful. Thanks!

  • Todd Davidson

    Thanks a lot! I used this in the gallery page for my website, and it works perfectly. You’re credited, obviously. Great tutorial, great code.

  • This is a good tutorial but be aware that Google doesn’t take too kindly to people who overly stuff keywords.

  • I just got a blackberry pearl. I wanted to get access to my bank account information on line but when i try log in in, it says: Your browser is not capable of viewing this site because it does not support JavaScript or JavaScript may be disabled.

  • Sanjib

    Client Account

    Company Name

    Address

    Phone Number

    Back Panel

    Rate
    Quantity
    Route Details

    Bus Branding

    Rate
    Quantity
    Route Details

    3D Bus Branding

    Rate
    Quantity
    Route Details

    function showHiddenDiv(id)
    {
    document.getElementById(id).style.display == “none” ? (document.getElementById(id).style.display=”block”):(document.getElementById(id).style.display=”none”)
    }

  • Although this script is not what I was looking for, as it is fairly simple, I wanted to at least take a few moments to thank you for posting the information for newer users. Also, to point out one flaw…please forgive me. If you are using this script and would like for your script to stay w3c compliant, you may want to add the color in your css script. For example: instead using “lightblue” or “lightgrey”, you may want to use the code specific equivalent: #9cf or #ccc (respectively). You could also use “background-color” instead of “background” in order to be completely specific.

    Again, thanks for this information. I know it will help out future viewers of your site.

  • Rajesh

    Thanx a lot for this script!!

    • Reena s

      Thank you so much!!! for posting this tutorial…very simple and when applied works flawless

  • Mei

    Thanks for posting this code online. Awesome tutorial!

  • Hello,

    Very nice script. It’s very useful. I was trying something with it …

    Basically I want to create more links

    |div id=”main”|
    This is not hidden.
    |a href=”#” onclick=”toggle(‘hidden1’);”|Toggle1 Div|/a|
    |a href=”#” onclick=”toggle(‘hidden2’);”|Toggle2|/a|

    By creating an additional div with the id hidden2 I can select either one. My problem is that when hidden1 is showing, and I click hidden2, they’re both showing. How do I just switch between them?

    Thank you

  • I liked ur tutorial and its really useful for me..!!!

  • Pingback: Re: Clear my setFlash | DeveloperQuestion.com()

  • yousf

    thank you

  • amit kumar

    thanks!

  • Pingback: HTML Demo on iPad - Apple iPad Forum()

  • That was a great tutorial however what I would like to do is create vertical menu on the left side and have the DIV open as the link is clicked .. can you give me the code so I can get tarted .. 1. code to build the menu and then the code to open the DIV when the Menu item is clicked.

  • Thanks for sharing it’s very helpful….

  • Very good help for jquery lovers

    Thank you

  • thanks for sharing the code

  • Cool..The illustration is presented very nicely, plz keep up this good work…I have tried for myself and it worked..

  • Thanks for some other wonderful article. Where else may just anybody get that kind of info in such an ideal approach of writing? I’ve a presentation next week, and I am at the search for such info.

  • Jose

    Great, thank you very much.
    One of the clearests explanations on programming i have ever seen on the internet.

  • Pingback: tutorials | Pearltrees()

  • Srinath

    Thank you very much

  • Srinivasamguttula

    sdfsdf asdfasdf

  • Gero

    Great tutorial! Many thanks for posting that explanation! One more question: Is there a way to hide the main div, while the “hidden” one is shown?

  • So this works but not in IE8 and IE7!!!! *sigh*

    • So first off, you definitely don’t want to use this for SEO purposes only. I wrote this a long time ago and now that I am looking back do not do that. If you still want the interaction it should work in IE. Honestly I don’t care about IE6 or IE7. Usually I don’t care about IE at all, but I understand 8 and 9 are still used widely. That being said I don’t believe there is any reason this would not work in IE8. All we are using is some common DOM selectors and most modern browsers and even IE can support those. 

      Try install the developer toolkit for IE and/or post whatever error you are getting. If there is no error it is most likely a problem with your CSS.

  • I like the νаluable info you provіde for your aгtіcles.
    I ωill boοκmark your weblоg and teѕt аgain here regularly.
    I’m reasonably sure I’ll be informed many new ѕtuff
    pгoper right hеre! Best of luck fοr the next!

  • Guest

    Java Development

    HIDED this above code

  • check

    check

  • parsetty

    Tanks, Its Very Use full

  • Naveen

    very use full code for me..Thanks budy

  • I loved as much as you’ll receive carried out right here.
    The sketch is attractive, your authored
    material stylish. nonetheless, you command get got an shakiness over that you wish be delivering the following.

    unwell unquestionably come further formerly again as exactly the same
    nearly very often inside case you shield this hike.

  • VERY HELPFUL

    My application was simpler than this. I have a form with a field that needs to show if one radio button is checked and hide when the other one is. The JavaScript is the same as yours, except I don’t pass a variable because I’m only concerned with one field on this form so I hard coded the ID. Here is my code:

    The radio buttons:

    Action:

    Add POC
    Edit Existing POC

    If the person clicks on Edit, the following dropdown displays. Clicking on Add makes it disappear because I only want it to show if the end user is editing an entry in the list.

    Here is the div:

    ………

    Thanks
    Andy, Baltimore