View Full Version : Show/Hide Div with default?!?

07-16-2009, 01:32 PM
I'm trying to make one div default open, and that is working ok, but when I hit the link for the the other div to open, the first div is not closing... It closes when I hit the link for the first div...

var currentShowingDiv = document.getElementById('idShowHide1');
function doHideShow3(divName){
var objDiv = document.getElementById(divName);
if (currentShowingDiv && currentShowingDiv != objDiv) {
currentShowingDiv.style.display = 'none';
if(objDiv.style.display == ''){
objDiv.style.display = 'none';
} else {
objDiv.style.display = '';
currentShowingDiv = objDiv;

Here is the php:

include_once "js/showhide_report.php";

echo '<a href="javascript:void(null);" onclick="doHideShow3(\'idShowHide1\');">Div 1</a> | ';
echo '<a href="javascript:void(null);" onclick="doHideShow3(\'idShowHide2\');">Div 2</a><br><br>';

echo '<div id="idShowHide1" style="padding:0px 0px 25px 0px;width:100%x;">';
echo 'Show something here for DIV 1';
echo '</div>';

echo '<div id="idShowHide2" style="padding:0px 0px 25px 0px;width:100%x;display:none;">';
echo 'Show something here for DIV 2';
echo '</div>';

So just to clarify what I want is to have one div open as default (idShowHide1) and when the user hits the link for the second div (idShowHide2) the first div close and the other open... As it is now the first div does not close...

Hoping for help ;-)

07-16-2009, 02:10 PM
Place the script after the both divs in the document.

07-16-2009, 02:16 PM
An unrelated question: javascript:void(null);
What is that supposed to do?

07-16-2009, 02:17 PM
Ahhh... Thanks... Did the job ;-)

Philip M
07-17-2009, 09:09 AM
An unrelated question: javascript:void(null);
What is that supposed to do?

See:- http://www.tizag.com/javascriptT/javascriptvoid.php

But same effect as <a href="#"

"Merely corroborative detail, intended to add artistic verisimilitude to an otherwise bald and unconvincing narrative". W S Gilbert

07-17-2009, 12:27 PM
Well, of course I know how to use a search engine. ;) This was more of a rhethorical question because actually I wanted to make the OP think why he would use such an outdated and “dirty” method.

If something is supposed to do nothing, why executing it at all in the first place? A much cleaner method is to use the onclick event and return false. However, this poses the question: If you have an anchor without any location to refer to, why use an anchor in the first place? Wouldn’t the anchor itself be useless if it isn’t linking anywhere? So, that’s why one could use any element and the onclick event, and style it with CSS to make it look like one can click it.

It’s all about semantics (http://boagworld.com/technology/semantic_code_what_why_how/).