showing and hiding divs on click

Question

socalfoolina 0 Newbie Poster

15 Years Ago

Hi,

I would like to know if there is a way to keep the script as is but also add a function to this script so that if a user clicks on another tab (div) the open tab will close on click? Please see code below:

Thanks in advance! :icon_smile:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

<style>

#right-nav {
	width:195px;
	position:relative;
	float:right;
	}

#Div1 {
	position:absolute;
	width:400px;
	background-color:#990000;
	right:195px;
	top:-3px;

	}
	

#Div2 {
	position:absolute;
	width:400px;
	background-color:#00FF00;
	right:195px;
	top:-3px;
	}
	
	
#Div3 {
	position:absolute;
	width:400px;
	background-color:#FFFF00;
	right:195px;
	top:-3px;
	
	}
	
	
#Div4 {
	position:absolute;
	width:400px;
	background-color:#9900FF;
	right:195px;
	top:-3px;
}
	

#Div1tab {
	position:absolute;
	top:10px;
	float:left;
	font: bold 12px Arial, Helvetica, sans-serif ;
	margin-left:15px;
	
	}
	
#Div2tab {
	position:absolute;
	top:45px;
	float:left;
	font: bold 12px Arial, Helvetica, sans-serif ;
	margin-left:15px;
	
	}
	
	
#Div3tab {
	position:absolute;
	top:85px;
	float:left;
	font: bold 12px Arial, Helvetica, sans-serif ;
	margin-left:15px;	
	}
	
#Div4tab {
	position:absolute;
	top:118px;
	float:left;
	font: bold 12px Arial, Helvetica, sans-serif ;
	margin-left:15px;
	
	}
	



.Tab-Text a:link {
	font: bold 12px Arial, Helvetica, sans-serif ;
	text-decoration:none;
	}
	
.Tab-Text a:visited {
	text-decoration:none;
	}
	
	
.Tab-Text a:hover {
	text-decoration:none;
	}
	
	
.Tab-Text a:active {
	text-decoration:none;
	}

#tabs {
	width: 195px;


}

#nav-container {
	position:relative;


}

#tabs {


}






 


</style>



<script language="javascript">

imageX1='plus';
imageX2='plus';
imageX3='plus';
imageX4='plus';

function toggleDisplay(e){
imgX="imagePM"+e;
DivX="Div"+e;
imageX="imageX"+e;
DivLink="DivHref"+e;
imageXval=eval("imageX"+e);
element = document.getElementById(DivX).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}
 if (imageXval=='plus') {document.getElementById(imgX).src='fab_tabs_on.gif';eval("imageX"+e+"='minus';");document.getElementById(DivLink).title='Hide Div #'+e+'a';}
 else {document.getElementById(imgX).src='fab_tabs_off.gif';eval("imageX"+e+"='plus';");document.getElementById(DivLink).title='Show Div #'+e+'a';}
 

}
</script>

</head>

<body>

<div id="nav-container">


    <div id="right-nav">
            
                <a title="Show Div #1a" href="javascript:toggleDisplay('1')" id="DivHref1"><img border="0" src="fab_tabs_off.gif" id=imagePM1></a>
                <div style="display:none;" id="Div1"><a href="javascript:toggleDisplay('1')">CLOSE</a>
                <div style="width:200px; border: 1px solid #000000;">
                    TEST ALL THIS GOOD STUFF RIGHT HERE 1!
                </div>
                </div>
            
            
                
                
                
            
            <a title="Show Div #2a" href="javascript:toggleDisplay('2')" id="DivHref2"><img border="0" src="fab_tabs_off.gif" id=imagePM2></a>
              <div style="display:none;" id="Div2"><a href="javascript:toggleDisplay('2')">CLOSE</a>
                <div style="width:200px; border: 1px solid #000000;">
                    TEST ALL THIS GOOD STUFF RIGHT HERE 2!
                </div>
            </div>
            
             
            <a title="Show Div #3a" href="javascript:toggleDisplay('3')" id="DivHref3"><img border="0" src="fab_tabs_off.gif" id=imagePM3></a>
            <div style="display:none;" id="Div3"><a href="javascript:toggleDisplay('3')">CLOSE</a>
                <div style="width:200px; border: 1px solid #000000;">
                    TEST ALL THIS GOOD STUFF RIGHT HERE 3!
                </div>
            </div>
            
            
              
            <a title="Show Div #4a" href="javascript:toggleDisplay('4')" id="DivHref4"><img border="0" src="fab_tabs_off.gif" id=imagePM4></a>
            <div style="display:none;" id="Div4"><a href="javascript:toggleDisplay('4')">CLOSE</a>
              <div style="width:200px; border: 1px solid #000000;">
                    TEST ALL THIS GOOD STUFF RIGHT HERE 4!
              </div>
            </div>
            
   
    
    
    <div id="tabs">
       <div id="Div1tab" class="Tab-Text"><a href="javascript:toggleDisplay('1')">Div1</a></div>
       
       <div id="Div2tab" class="Tab-Text"><a href="javascript:toggleDisplay('2')">Div2</a></div>
       
       <div id="Div3tab" class="Tab-Text"><a href="javascript:toggleDisplay('3')">Div3</a></div>
       
       <div id="Div4tab" class="Tab-Text"><a href="javascript:toggleDisplay('4')">Div4</a></div>
       
          
	</div>    
    
</div>
    

</body>
</html>

javascript

2 Contributors
4 Replies
131 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Socalfoolina ,

I'm not sure but it may be as simple as :

function toggleDisplay(e){
	for (var i=1; i<=4; i++){
		document.getElementById("Div" + i).style.display = (i == e) ? 'block' : 'none';
		document.getElementById("imagePM" + i).src = (i == e) ? 'fab_tabs_on.gif' : 'fab_tabs_off.gif';
		document.getElementById("DivHref" + i).title = ((i == e) ? ('Hide' : 'Show')) + 'Div #' + i + 'a';
	}
}

Give it a try.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

socalfoolina 0 Newbie Poster · Answer 1 · 2009-08-19T21:09:44+00:00

This would replace my current javascript correct? Leaving the html as is with the href javascript tags? That is how I went about implementing this code but it didn't work. I wanted to be sure this is how I should go about it. Thanks!

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2009-08-19T22:43:28+00:00

Socalfoolina,

There's a small mistake in my javascript.

//-- Find 
//		document.getElementById("DivHref" + i).title = ((i == e) ? ('Hide' : 'Show')) + 'Div #' + i + 'a';
//-- Replace with
		document.getElementById("DivHref" + i).title = ((i == e) ? 'Hide' : 'Show') + 'Div #' + i + 'a';

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-08-19T22:59:42+00:00

On the other hand maybe this gives the behaviour you want:

function toggleDisplay(e){
	for (var i=1; i<=4; i++){
		var el = document.getElementById("Div" + i);
		el.style.display = (i == e && el.style.display=='none') ? 'block' : 'none';
		document.getElementById("imagePM" + i).src = (i == e && el.style.display!='none') ? 'fab_tabs_off.gif' : 'fab_tabs_on.gif';
		document.getElementById("DivHref" + i).title = ((i == e && el.style.display!='none') ? 'Hide' : 'Show') + 'Div #' + i + 'a';
	}
}

The code is only very sighly different.

Airshow