Toggle Visibility - Show/Hide Anything | Movalog Blog: Making Movable Type Jump Through Hoops

Toggle Visibility - Show/Hide Anything

By Arvind Satyanarayan on March 3, 2006 | Filed under Design & Templates | Comments (64)

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>

64 Comments

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

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!

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

<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>  <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>

<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>

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!

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

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

Name

Email Address

URL

Comments (You may use HTML tags for style)

Please type the word "movalog" (required):

Remember personal info?

Movalog Blog

Making Movable Type Jump Through Hoops

Toggle Visibility - Show/Hide Anything

64 Comments

Leave a comment

Preview

Categories

Resources