On Click, Show a Div and Hide Another

[MegaMan1311]

I need some javascript that when I click on Go to Back, it hides the div "front" and shows the div "back". Thanks in advance!

 

[angelwatt]

Assuming you have HTML similar to this,

<div id="front">...</div>
<div id="back">...</div>
...<a href="javascript:GoToBack();">Go to Back</a>...

Then you can use a function like so to do what you asked.

function GoToBack()
{
  document.getElementById("front").style.display = "none";
  document.getElementById("back").style.display = "block";
}

Customize as need be.

 

[MegaMan1311]

That didn't work. Does it also hide / show the divs inside of those two divs?

 

[angelwatt]

That didn't work. Does it also hide / show the divs inside of those two divs?

Hmm it works for me. It's only set to show "back" and hide "front" and not toggle, but could be made to do so. Yes, it will hide everything inside the "front" div tag. If you provide the code I might be able to tell what's up.

 

[MegaMan1311]

The Javascript: (In the Header)

<script type="text/javascript">
function GoToBack()
{
  document.getElementById("front").style.display = "none";
  document.getElementById("back").style.display = "block";
}
</script>

HTML (Sorry for the messy code. I haven't cleaned it up yet.)

<div id="front">
<script language="JavaScript" src="http://thecybernetwork.net/feed/feed2js.php?src=http%3A%2F%2Fwww.thecybernetwork.net%2Frss.php&utf=y;targ=y" type="text/javascript"></script>	

<noscript>
<a href="http://thecybernetwork.net/feed/feed2js.php?src=http%3A%2F%2Fwww.thecybernetwork.net%2Frss.php&utf=y&html=y;targ=y">View RSS feed</a>
</noscript>
<div id="moveFront" style="cursor:move" class="moveRgn" onmousedown="window.nativeWindow.startMove();"><img src="transparent_move.png" alt="Move" width="20" height="20" id="move" onmouseover="MM_swapImage('move','','move.png',1)" onmouseout="MM_swapImgRestore()" /></div>
       
<br /><br /><br /><br /><br /><br /><br /><br /><br /><a href="javascript:GoToBack();">Go to Back</a></div>
<div id='back'>
		<div id='options'>
			<form id='formName' action='tcn.html' method='post' name='formName' target='_self' onSubmit="load(); return false;">
				<select name='feed' onChange='saveFeedPref();'>
					<optgroup label='MegaMan News'>
						<option value='http://www.thecybernetwork.net/rss.php?number=25'>Recent News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=6&number=25'>Classic News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=7&number=25'>X News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=8&number=25'>Legends News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=9&&number=25number=25'>Battle Network News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=10'>Zero News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=3&number=25'>ZX News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=4&number=25'>Starforce News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=5&number=25'>Capcom News</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=1&number=25'>Events</option>
						<option value='http://www.thecybernetwork.net/rss.php?category=2&number=25'>The Cyber Network News</option>
					</optgroup>
				</select>
			</form>
		</div>
       </div>
<div style="background:url(logo.png);cursor:pointer;width:185px;position:absolute;height:35px;top:55px;left:51px;" onClick="javascript:widget.openURL('http://www.thecybernetwork.net/');"></div>
		<div id='doneButton'></div>

CSS:

#front {
	display: block;
	background: url(Default.png) no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 180px;
	z-index:0;
}
#back {
	display: none;
	background: url(Back.png) no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 180px;
	z-index:0;
}

That is most of the code.

 

[angelwatt]

Well I copied and pasted the HTML and CSS you listed, and it works fine for me. When I click on the "Go to Back" link the stuff your script displays disappears and the drop down box appears.

What behavior are you getting?

 

[MegaMan1311]

Weird... It's working now. Thanks for your help.