Show/Hide Div with default?!?

I have this script which show and hides divs, but I want a certain div to be open at start, how can I do that?

var currentShowingDiv = null;
	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;
				}
			}

I have 2 div id’s (idShowHide1,idShowHide2) and want “idShowHide1” to be open as default…

Thanks in advance :wink:

It would show if you weren’t explicitly setting “display: none” either in an inline style or CSS file somewhere. So don’t do that.

Ahhh I see, but If I remove the “display:none” from my css for that specific div, then when I press the link for the other div, the “idShowHide1” stays open??? It should close when I open “idShowHide2”… Hope this is understandable!

You need to change “var currentShowingDiv = null;” to be the one that’s currently showing at the start.

hmm. I’m missing something… I changed the “var currentShowingDiv = null;” to “var currentShowingDiv = idShowHide1;” and removed the “display:none;” from that div, but when I click on the link to show “idShowHide2” it still keeps the “idShowHide1” open untill I hit the link for the “idShowHide1”… Any ideas?!?

var currentShowingDiv = document.getElementById(‘idShowHide1’);

Sorry, missed that, but still… Same problem…

I try to post whole script here…

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

The html:

include_once "js/showhide.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>';

Hope this gives the full picture…

The “include_once “js/showhide.php”;” should be at the bottom… sorry?!?