JavaScript toggle code
Website January 11th, 2004 |I’m just saving this for myself for future design possibilities…
The script that goes in the head:
<script type="text/javascript">
<!--
// toggle visibility
function toggle( targetId ){ if (document.getElementById){ target = document.getElementById( targetId ); if (target.style.display == "none"){ target.style.display = ""; } else { target.style.display = "none"; } } } --> </script>
Sample code showing usage:
<h3>Blogs I Read <a href="#" onclick="toggle('outside2');return false;" title="Toggle BlogRoll">(show/hide)</a></h3>
<div id="outside2"> <h1><a href="http://www.google.com" title="google.">Google Search</a><br /> <a href="http://www.google.com" title="google.">Google Search</a></h1> <div class="dailyphoto"><!--#include virtual="/daily/dailyphoto.inc"--></div> </div>
<h3>Blogs I Read <a href="#" onclick="toggle('outside3');return false;" title="Toggle BlogRoll">(show/hide)</a></h3>
<div id="outside3"> <h1><a href="http://www.google.com" title="google.">Google Search</a><br /> <a href="http://www.google.com" title="google.">Google Search</a></h1> <div class="dailyphoto"><!--#include virtual="/daily/dailyphoto.inc"--></div> </div></div>
(via Joel Blain)
iTunes: “World, The” by Quest from the album Essential Chillout (2000, 4:17).
[See also: A call for help! | Archive tweaks, search engine online | BlogFodder | No more 404’s | May Day! ]
Greg
mano
dad
Edony Elder
Super Geek
January 12th, 2004 at 12:39 am
thanks for the code. it’s nice. am thinking of using it myself.
January 13th, 2004 at 1:18 am
I’ve been meaning to find this code after seeing it (or something similar) on other sites. Not wanting to be picky but the tab order for the ‘remember personal info’ checkbox is wrong.
January 13th, 2004 at 2:05 am
Check out the one, I use. It’s similar - almost identical, even. Strange…
January 13th, 2004 at 2:08 am
Check out the one, I wrote. It’s similar, I guess
January 13th, 2004 at 2:15 am
Chicken, Egg, Fish, Fowl?
Michael Hanscom posted this javascript code to toggle visibility on click. I use a similar approach, and the code seems…
January 26th, 2006 at 5:47 pm
Like the toggle code. Is there a way to make it appear in the hide mode when you first load a page? It seems to be in the show mode as written.
February 1st, 2006 at 4:09 pm
Easy Isak! Since all it does is essentially change the style, you can set up your default stylesheet rules to have the item hidden upon initial load.
For example, to hide an element like this:
You would add
to your stylesheet.
February 1st, 2006 at 4:13 pm
Crap… it ate my code. I should have known better…
To hide this element by default:
Put this in your stylesheet:
February 1st, 2006 at 4:14 pm
Heh — I saw the comment come in and fixed the code in the first one, Nick.
February 23rd, 2006 at 7:23 pm
I have included
p#about{ display:none; }
in my stylesheet, and it’s hiding what I want to hide, but I can’t get the script to unhide it now. The page I’m working on can be found here: http://agentlebossanova.net/gentle/
Do you have any more hints?
April 26th, 2006 at 11:11 pm
Jed —
I had the same problem. I found that if I put the display:none code in the div tag instead of the style sheet, it started hidden and toggled fine.
Ex:
`
`
August 7th, 2006 at 4:45 pm
thanks for the code
September 5th, 2006 at 1:13 pm
Thanks for the code, I am going to implement this immediately!
July 10th, 2007 at 5:47 am
Works great in IE, but what about FireFox? Can you provide a cross-browser compatible version of your script? Much appreciated!
August 1st, 2008 at 6:26 am
I had some issues with this toggling code, but I identified the source of the problem.
By removing the “” from the code, the problem seemed to fix itself.