Toggle Visibility - Show/Hide Anything

One piece of javascript code that I use very frequently is a function that basically toggles the visibility of an element e.g. click, show, click, hide.

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

Simply paste the above snippet of code underneath your <body> tag and you call it by passing to it the ID of the element you wish to toggle the visibility of (this element can be anything that takes an id attribute). For example

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

67 Comments

elise said:
on Mar 4, 2006 1:51 AM | Reply

Hey Arvind, could you show us an example of this in action?

Ben said:
on Mar 6, 2006 1:52 PM | Reply

Great tip, thanks for sharing.

jyoseph said:
on Mar 12, 2006 7:59 AM | Reply

That is a very simple and straight forward function, gotta love that.

I've really been into this moo.fx lately too. It's very light and fairly straight forward.

http://moofx.mad4milk.net/

And an easy guide to your first implementation: http://www.avinashv.net/tutorials/moofx/

Kay said:
on Mar 30, 2006 11:29 PM | Reply

thanks for sharing this tip!i've got a question though:this script,by default,show everything when a page is loaded.i thought by using might help hide what's under 'B' but that didn't work....i wonder if there's a way to make 'B' hidden by default and will only be shown when i click on the link

Manu Agrawal said:
on Apr 27, 2006 7:26 PM | Reply

Hello Kay; You can hide it by default by changing the line

<div id="foo">This is foo</div>

to

<div id="foo" style='display:none;>This is foo</div>

Hope it helps...

jon said:
on Apr 29, 2006 12:48 AM | Reply

Nice tip.

Can you please tell me how to hide all when the page loads.

I plan to use this on a page of FAQ's and what I would like to do is to show the relevant FAQ (others will be hidden) when a user clicks a link on a previous page...is it possible to pass this info using a query string?

Thanks

Eliza said:
on Apr 30, 2006 2:37 PM | Reply

I'm confused. I am trying to install this, and was wondering [much the same as the person above] how to have the contents hidden until the person clicks the relevant title...

But I dont understand the tip above

You can hide it by default by changing the line This is foo to This is foo

It looks the same to me... Please help!

kilian said:
on May 20, 2006 5:09 PM | Reply

a really quick and simple edit... should work - not flexible with different ids in this example though..

<script type="text/javascript">
<!--
function resettoggle() {
var e = document.getElementById('foo');
e.style.display = 'none';
}

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>

<body onLoad="resettoggle()">
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>
</body>

//kilian

kilian said:
on May 20, 2006 5:14 PM | Reply

this forum makes the tags go active... check my example by viewing the source code instead //kilian

Peter said:
on May 22, 2006 5:26 PM | Reply

Thanks alot for sharing this information!

jesse said:
on Jul 20, 2006 1:54 PM | Reply

The problem i have with the visibility of a is that i have 3 div, and if i hide the one in the middle theres still a space between the first and last div. I want them to get closer so i can fit more info on same page.

When i click a link in the 1 div, i want the div under to show (2), and push the 3rd div down.

I guess i must put the div in a javascript variable and write it out that way.

Or any other good solutions?

taejien said:
on Jul 31, 2006 3:20 AM | Reply

to have it start hidden, add
style="display:none"
to your tag before the id tag.

Also would like a solution like the post above mines. Hide the others while one is showing. thanks.

taejien said:
on Jul 31, 2006 3:25 AM | Reply

  • to your DIV tag before the id tag

krutherford said:
on Nov 4, 2006 9:00 AM | Reply

This code is excellent! Although, I'm running into a problem trying to create a toggle within a toggle. For example, when I create the first toggle it works perfectly. Within the first toggle, I want to insert a second toggle, so that when the original results are shown, it allows the user to drill down even further.

Example:

[+] Toggle 1

When you click the [+] it looks like:

[+] Toggle 1 [+]Toggle 2 [+]Toggle 3

When the [+] for Toggle 2 is clicked it would look like this:

[+] Toggle 1 [+]Toggle 2 List 1 List 2 [+]Toggle 3

Any help is much appreciated.

Thanks!

david said:
on Nov 14, 2006 8:06 AM | Reply

in my example, it works fine as long as the links are within the top of the page. if you have a long page and a link that requires scrolling, the

david said:
on Nov 14, 2006 8:08 AM | Reply

(for some reason my comment above was cut off)

mike said:
on Nov 21, 2006 1:51 PM | Reply

does this also work with multipe divs? - i like to change the visability of multiple divs all with the same id

thx

L33TeR said:
on Nov 25, 2006 9:30 AM | Reply

Thanks a lot, Arvind Satyanarayan :) Works

L33TeR said:
on Nov 25, 2006 9:59 AM | Reply

By the way, it closes when you click and its open by default,

is there a way to make it closed by default and open when click?

Thanks,

Arvind Satyanarayan said:
on Nov 26, 2006 2:01 PM | Reply

Indeed there is. For the thing you are toggling just add style="display:none;". For example

<div style="display:none;">

Ben said:
on Dec 5, 2006 11:35 AM | Reply

Is there some way I can make this so that when I click one thing it hides it and shows another and vice versa? For example, on loading you see:

View Data

You click it and "View Data" disappears and you see:

Explanation of Data

When you click "Explanation of Data" it goes back to "View Data"?

Ryan said:
on Dec 8, 2006 4:00 AM | Reply

I want to be able to have multiple lines be hidden.
I hope this isn't hard to understand.

would look similar to the examples below:

[+]What is foo? this is not foo this is not foo this is not foo

{when clicked}(see below)

[-]What is foo? this is foo this is not foo this is not foo this is foo this is not foo

Please help, and soon. I have a deadline.....and i have no idea how to do multiple lines.

Keith said:
on Dec 16, 2006 3:51 PM | Reply

In the anchor tag, you could just take out the "href" attribute altogether. That should prevent the link from jumping you back to the top of the page when clicked below the page fold.

Change this:

<a href="#" onclick="toggle_visibility('foo');">

To this:

<a onclick="toggle_visibility('foo');">

L33TeR said:
on Dec 18, 2006 1:55 AM | Reply

Thanks a lot!

L33TeR said:
on Dec 19, 2006 12:51 AM | Reply

What if I use it more than one time per page? If I have the same show/hide 2 times, the second one opens the first one instead. Is there a way to "separate" them? Give them names or IDs or something?

Thanks

Turhan said:
on Dec 26, 2006 3:39 AM | Reply

Hi guys. Great bit of code... was wondering though how could we change it so the link you click on to show the div is 'SHOW TEXT' and when you click it and the div appears, the link changes to 'HIDE TEXT'... Any help would be greatly appreciated... Thanks!

dev said:
on Jan 3, 2007 1:05 AM | Reply

nice code .. :)

I got a question what if Javascript is disabled. I was wondering if someone can modify this code so that if Javascript is disabled then just show the contents.

cathie said:
on Jan 5, 2007 11:15 AM | Reply

how can i change the link color when toggle is on & off?

such as we use in CSS?

eg: when toggle is on, link is red, when toggle is off, link is blue...

a:link {text-decoration:none} a:active {color:red; text-decoration: none} a:hover {color: blue;text-decoration:underline} a:visited {text-decoration: none}

thank you!

Daniel said:
on Jan 24, 2007 1:55 PM | Reply

Is there a way to show/hide multiple divs at the same time?

Like a link:

Expand all | Collapse all

kayloe said:
on Jan 30, 2007 10:53 AM | Reply

I had to use a conditional statement to prevent bugs in IE:

function toggle_visibility(id) { var e = document.getElementById(id); if(e != null) { if(e.style.display == 'none') { e.style.display = 'block'; } else { e.style.display = 'none'; } } }

Will said:
on Feb 4, 2007 6:52 PM | Reply

super little function. thanx :)

Sonnentier said:
on Feb 7, 2007 3:49 PM | Reply

Very useful and handy :D

Mihai Bocsaru said:
on Mar 8, 2007 11:18 PM | Reply

Hello Arvind,

God job! Jennifer just mentioned this script of yours at: http://www.scriptygoddess.com/archives/2007/03/06/show-hide-javascript/

Bravo, Mihai

Arvind Satyanarayan said:
on Mar 8, 2007 11:31 PM | Reply

Hi Mihai, thanks for the heads up with that. That link had cropped up a few days ago in my Technorati feed :) It's funny how things come around in a circle, I used to have bookmarked the show/hide toggle that Jenn had up there 3/4 years ago!

stu said:
on Mar 21, 2007 4:44 PM | Reply

Rather than toggle on and off a div is there any way if i have 4 buttons and 4 divs that I can have an onclick that turns on 1 div and turns off the other 3.

Example: press button 1 and div1 is display; block; and div2, div3 and div4 are switched to display: none; and press button 2 and div2 is displayed and the other 3 disappear

Any help would be much appreciated

Steve M said:
on Apr 3, 2007 1:48 AM | Reply

I've got a similar problem & I'm not quite sure how to code this.

I have a checkbox and 5 text fields. If the checkbox is checked, I want to show the text fields.

If it's not checked, they need to be hidden.

Can anyone help? Thanks!

Steve M (web newbie)

Dominic said:
on Apr 7, 2007 9:53 PM | Reply

I referenced a DIV tag to call a layer via mouseover and mouseout on some text (a news headline) on the left side of the screen, so I could toggle the visibility the expanded text (the full story) on the right side of the screen. Now when the screen resolution changes, the position of the "Full Story" layer moves, and I need it to remain in a particular area. Any suggestions? Thanks

Bob said:
on Apr 12, 2007 7:12 PM | Reply

To fix the problem of the code scrolling back up to the top, add return false; to your onclick tag.

Example:

Show More

Mick said:
on May 15, 2007 2:08 AM | Reply

Great simple script. Did anyone figure out how to update this script to only show 1 div at a time? Any help is appreciated, thanks.

It's Simple... said:
on May 15, 2007 7:19 AM | Reply

If you want to change the status of multiple div's at once, just chain the event!

e.g. onclick="togglevisibility('divA');togglevisibility('divB');togglevisibility('divC');togglevisibility('divD');"

Remember, DON'T name all your div tags the same thing...

Neeraj Maurya said:
on Jun 14, 2007 12:36 PM | Reply

This is one example:

function swaptabs (showthis,hidethis) { var style2 = document.getElementById(showthis).style;style2.display = "block"; var style3 = document.getElementById(hidethis).style;style3.display ="none";
}

[+]Title 1

[-]Title 1
Content for title1

[+]Title 2

[-]Title 2
Content for Title 2

[+]Title 3

[-]Title 3
Content for Title 3

Neeraj Maurya said:
on Jun 14, 2007 12:45 PM | Reply

<script language="JavaScript" type="text/JavaScript"> <!-- function swaptabs (showthis,hidethis) { var style2 = document.getElementById(showthis).style;style2.display = "block"; var style3 = document.getElementById(hidethis).style;style3.display ="none";
} //--> </script>

<!-- Title 1 --> <div id="Title1-closed" name="Title1-closed" style="DISPLAY: block"> <a href="javascript:swaptabs('Title1-open','Title1-closed');" >[+]<strong>Title 1 </strong></a> </div> <div id="Title1-open" name="Title1-open" style="DISPLAY: none"> <a href="javascript:swaptabs('Title1-closed','Title1-open');" >[-]<strong>Title 1</strong></a> <br> Content for title1 </div> <pre> <!-- Title 2 --> <div id="Title2-closed" name="Title2-closed" style="DISPLAY: block"> <a href="javascript:swaptabs('Title2-open','Title2-closed');" >[+]<strong>Title 2</strong></a> </div> <div id="Title2-open" name="Title2-open" style="DISPLAY: none"> <a href="javascript:swaptabs('Title2-closed','Title2-open');" >[-]<strong>Title 2</strong></a> <br> Content for Title 2 </div>

<!-- Title 3 --> <div id="Title3-closed" name="Title3-closed" style="DISPLAY: block"> <a href="javascript:swaptabs('Title3-open','Title3-closed');" >[+]<strong>Title 3</strong></a> </div> <div id="Title3-open" name="Title3-open" style="DISPLAY: none"> <a href="javascript:swaptabs('Title3-closed','Title3-open');" >[-]<strong>Title 3</strong></a> <br> Content for Title 3 </div>

Lars said:
on Jun 17, 2007 12:42 AM | Reply

Did you find an answer?

andrew said:
on Jun 23, 2007 12:11 AM | Reply

i like this script small, light...

but my problem is...

i want to show hide different elements in the same DIV or section

example, user hover over link a changes to b, c, or d

im assuming i would have to adjust the z-index of each, is this the correct approach

Joyce said:
on Jun 27, 2007 10:04 PM | Reply

Wow! Thanks for this really awesome code! I was struggling with the drop-down menu before which had a way more confusing code, but got it within a few minutes with this code!

You've saved me sooo much time! :)

pankers said:
on Jul 17, 2007 8:09 AM | Reply

I am also interested in stu's request...

Rather than toggle on and off a div is there any way if i have 4 buttons and 4 divs that I can have an onclick that turns on 1 div and turns off the other 3.

Example: press button 1 and div1 is display; block; and div2, div3 and div4 are switched to display: none; and press button 2 and div2 is displayed and the other 3 disappear

Many thanks..

nasir said:
on Jul 18, 2007 5:42 PM | Reply

hello.i have an issue with the following code : var row=document.getElementById('tableName').value; row.style.display='';

The above mentioned code is working perfectly fine but the page is showing a javascript error "style is null or not an object". Can anyone help me to sort out this problem.

sm9 said:
on Jul 21, 2007 4:44 AM | Reply

Hey there,

Got the code working fine, but I'd like to repeat dev's question above about how to display the contents if JavaScript is disabled?

I'm using the display:none markup as I wanted everything to be hidden by default, but wonder if there is any addition code I can add to this so that everything appears when JavaScript is disabled?

Thanks.

Lobo said:
on Aug 21, 2007 10:51 PM | Reply

I'm looking for the answer to krutherfords question above if anyone can help please....(create a toggle whithin a toggle)... very much appreciated

Matt said:
on Aug 23, 2007 3:59 PM | Reply

Thanks alot for this code!! I couldn't get to understanding Mootools or Moo.fx for the sake of it, so I'm using this for a section on my site with hundreds of texts :P Thanks! :D

Ivan said:
on Aug 24, 2007 5:55 AM | Reply

!for those looking for a solution that lets you show 1 div, while concealing others, I devised this small bit of code a few years back:

< script type="text/javascript"> lastone='empty'; function showIt(lyr) { if (lastone!='empty') lastone.style.display='none'; lastone=document.getElementById(lyr); lastone.style.display='block'; } < /script>

with this used as a link:

< a href="JavaScript:;" onClick="showIt('divID')"> link< /a>

an example of a div would be:

< div id="divID" style="display:none;">

You can have as many layers to switch between as you want. You can see this at work on my gallery page.

The only thing is - it only works smooth when all the layers are hidden to begin with. If there's an element that is not hidden when the page is loaded, this script does not hide it. If anyone has a remedy to that problem - that would be awesome.

ps. that moo.fx looks sweet, thanks jyoseph!

Ivan said:
on Aug 24, 2007 9:23 PM | Reply

oops

<script type="text/javascript">
lastone='empty'; 
function showIt(lyr) 
{ 
if (lastone!='empty') lastone.style.display='none'; 
lastone=document.getElementById(lyr); 
lastone.style.display='block';
}
</script>

link example:

<a href="JavaScript:;" onClick="showIt('divID')" ">link</a>

div example:

<div id="divID" style="display:none;">
content
</div>

mbn said:
on Sep 20, 2007 5:26 AM | Reply

I'm trying to build a site where I click a link in one div and what info to show in another.... sorry if this is a basic question i'm just a novice :|

Beth said:
on Sep 23, 2007 1:37 AM | Reply

This site shows one way of swapping out divs, starting by showing one div, then hiding all divs but the one you want shown:

http://support.internetconnection.net/CODELIBRARY/JavascriptShow_Hide.shtml

I am using it successfully. Just remember you have to have the same divs in your array as in your body.

Eric Rasmusen said:
on Oct 9, 2007 5:41 PM | Reply

Thank you for the script. I expand on your explanation at my weblog:

http://rasmusen.org/t/2007/10/arvind-satyanarayans-toggle-visibility.html

OBW said:
on Oct 10, 2007 9:52 PM | Reply

I've tried 8 different toggle scripts today and this was the only one that worked. THANK YOU!!

e-builds said:
on Nov 8, 2007 5:08 PM | Reply

Here is a more variable version that allows a general approach (e.g. using 1 function library in your site for different approaches): - Allows custom style as 'block' (e.g. 'inline') - Allows getting by ID OR specifiying element

    
    /*  */
    

JOHN said:
on Dec 4, 2007 1:50 AM | Reply

Hi, does anyone have any idea how to set a cookie to remember the status chosen by the user and revert to that setting for the remainder of the session. maybe even with an expiration date so it remembers their choice upon their return? any help would be gratefully received

P@ said:
on Jan 18, 2008 8:00 PM | Reply

I've been successfully using this technique for awhile but now I've run into a problem: I need to toggle rows in a table. This works if I put the span or div within a td but doesn't work if I put it around one or more tr's.

Any suggestions?

Thank you in advance

Nelson said:
on Jan 24, 2008 3:06 AM | Reply

Nice. Thank you. ^_^

Pankaja said:
on Feb 2, 2008 2:53 AM | Reply

I want to do the following: 1. I want to add mouseover for all of the GridView cells in a particular column, which I have done. I am able to display another pop up (more like a floating box) on top. 2. I want to be able to make the floating box to be on top without the background being interspersed. Right now, the contents of the GridView cell and the popup are getting mixed up.

Any help is greatly appreciated, since I have exhausted all possibilities. Please respond to pankaja_shankar@ml.com

Sanjay M said:
on Mar 27, 2008 11:41 AM | Reply

Thanks a ton for this simple and elegant script, it worked well both on IE and Firefox and really gives a lot of food for thought for a really user friendly interface that saves on the screen real estate

Ann Ray said:
on Apr 10, 2008 5:17 PM | Reply

Love the simple script for tucking away a div or two!

For those who are also looking for a FAQ-style solution, I finally found a winner: definition lists. They're more flexible than you might think because you can nest paragraphs, images, lists, and tables within the DD, as well as having multiple DDs for a DT. http://www.tjkdesign.com/articles/toggleelements.asp http://www.divahtml.com/products/divaFAQ/toggleanswers.php

I just put the Diva code into a FAQ, which took about 30 minutes including re-tagging the content and tweaking the images and styles. Next is adding it to my MT templates for search results and entry lists, with the article name in the DT, and excerpt, author, categories and tags in the DD.

Jack said:
on Apr 12, 2008 10:43 PM | Reply

I wonder if this can this combined with something else to get the following effect:

First, page appears as follows:

[Show details]

Upon clicking "Show Details" you got:

[Hide details]

Text of the details Text of the details

Text of the details Upon clicking "Hide Details" you got again:

[Show details]

What I want is to change the text "Show Details" to "Hide Details" in addition to hiding the text. Is it possible to do something like this with javascript?

Thanks Jack

Small Potato said:
on May 16, 2008 6:44 AM | Reply

Hi all, I have wrote something similar with working examples in my blog, visit for the work in action if you want to get more familiar with the idea.

Hide/show html elements using CSS and Javascript

beatson said:
on May 19, 2008 9:12 PM | Reply

With this is my code: etc

it re-loads the page, iv tried and hides the content again =(

gshack said:
on Jun 7, 2008 12:11 PM | Reply

thank you very much to everybody this solved my faq problem...

i suggest to new visitors here...go to the 2nd post of Ivan...