Here is a generic script to show/hide a DIV or other element via “nextSibling” of the DOM. This example script uses a IMG as the click object within an “H?” tag as its Parent Object. The “CLICK” of the image activates the script passing “this” to the function. The function then with the DOM gets that image “Parent” object. Next is identifying the “nextSibling” of that parent object.
With the “nextSibling” we check to see if the “display” of the element is “none”. If it is “none” we set “vSibling.style.display = ‘block’;” to enable the element to be visible. If it is not “none” then we set it to “vSibling.style.display = ‘none’;”
Images needed:
Show/Hide Example
<H4> <!– Parent of trigger element (img) –>
<img src=”img/expand.gif” alt=”Show Div” border=”0″ style=”cursor:pointer;” onclick=”showHide(this);” />
Title #1 with H tag and DIV
</h4>
<div style=”display:none;”> <!– Effected Element (sibling of H4) – “display:none;” needs to be inline –>
<p> This is the content of the #1 div</p>
</div>
Here is the HTML and Javascript
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>SHOW/HIDE Div with Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<script type="text/javascript">
function showContent(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
if(vSibling.style.display == "none")
{
vThis.src="/img/collapse.gif";
vThis.alt = "Hide Div";
vSibling.style.display = "block";
} else {
vSibling.style.display = "none";
vThis.src="/img/expand.gif";
vThis.alt = "Show Div";
}
return;
}
</script>
<body>
<h3>Show/Hide Div Example</h3>
<div style="margin-top:5px;">
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #1</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #1 div</p>
</div>
<h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showContent(this);" />Title #2</h4>
<div style="margin-top:5px; display:none; border:1px solid red;">
<p> THis is the content of the #2 div</p>
</div>
</div>
</body>
</html>
17 comments ↓
It’s really a good technique. It prove very helpful to me.
Very nice script you write, I really like this . I got help it.
Great script. Thanks!
Very good solution this one!
I have well adopted it for the whole site map of a recent site: http://www.astrotime.org/mappa_del_sito.htm and think the result is nice and worse to be seen.
Perhaps you could take some advantage too from an application that I wrote, a “special” editor, allowing you to insert any tag of yours into a popup menu, then quicly paste around selected portions of text.
A free licence is available on your request.
Thank you,
Antonio
Can’t adopt it in my blog: http://iboong.tumblr.com
Hi, this is great script I would like to use to show/hide search form on my real estate site. I have search form on search results page. Script works fine. I have just one feature request: how can I modify script so that script remember last (show/hide) state, until again user click on image. What I want is, when I hide div, I want that div stays hided, until someone again click on image. My searchresults page is templates, so when I go to page 2, searchresulst page will reload, and again search form will be presented. I hope you will understand my not so good english. Thank you
Hai..
Its a nice script ..
Very helpful to me
This is not working for me in IE7. What could be the problem. It shows error in page on line no 8
Pretty nice, but it could use a smooth scrolling effect
Webbug
LinkArchive.info
Thanks buddy, it was really helpful in time saving and uplifting the Gui. It also saved a lot of my brain.
Thank You
Well done – I’ve got a thousand of these but had to have one quick solution without having to search the archives; actually I think this is better than most I had anyway.
FYI – this works GREAT in a web part (note: you have to remove the comments and override the styles on the ul).
Well, I like it, very easy to use and working fine with the……
Thanks buddy
AAA
Fantastic script
thanks very much A*
Same as Gheun.
It’s working in Firefox and Chrome but not in IE7 nor in IE8.
It say error in page (Object required)
Angel is right. .. IE doesn’t like passing ‘this’ as function argument
Realy nice script
Very helpful to me
thanks very much Advance.
Leave a Comment