Forums

JosiahB

Hey! I need some help with this code ... I have it so that when the page is first viewed nothing is there, but when you click on each link they appear one by one (and if you click the same one it then disappears)... but I want the other div to disappear when the next link is clicked on and not just stack underneath each other ...

Any help would be appreciated!!
Thanks!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<header>
	<link rel="stylesheet" type="text/css" href="index.css" />
	<script type="text/javascript">
	function showStuff(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
	<title>Camps For Christ</title>
</header>
<body>
<div id="page_rap">
	<div id="header">
		<p><span style="font-size: 2.5em">Camps</span> For <span style="font-size: 2.5em">Christ</span></p>
		
		<div id="header_drop"></div>
	</div>

	<div id="main_content">
		<div id="header_nav">
			<ul>
				<li><a href="#" onclick="showStuff('Camps');" >Camps</a></li>
				<li><a href="#" onclick="showStuff('Register');">Register</a></li>
				<li><a href="#" onclick="showStuff('References');">References</a></li>
				<li><a href="#" onclick="showStuff('Contact');">Contact</a></li>
			</ul>
		</div>

		<p><span id="Camps" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel. Cras ac enim in quam bibendum interdum vel eu massa. Ut rutrum risus ac nisl lacinia eu consequat turpis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce lacus justo, volutpat sit amet vestibulum eu, convallis eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc bibendum gravida nulla vitae porta. Suspendisse sit amet dui at sapien sollicitudin faucibus. Aliquam vel urna faucibus nunc convallis facilisis dapibus vel lorem. Aenean viverra sagittis erat, ut ultrices urna iaculis in. Aliquam auctor ultrices nibh, a vestibulum lacus luctus eget. Donec a nisi eget ipsum volutpat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
		</span></p>

		<p><span id="Register" style="display: none;" >Aliquam erat volutpat. Quisque pretium, erat ac laoreet pulvinar, sem ipsum malesuada erat, nec tristique arcu erat molestie arcu. Aliquam ante nisi, elementum a tristique eget, imperdiet quis justo. Praesent vehicula nulla massa. Morbi quam libero, aliquam quis elementum id, egestas ultrices eros. Pellentesque vestibulum vulputate accumsan. In volutpat lobortis fringilla. Suspendisse nec augue nisl, eget consequat nisl. Vivamus condimentum aliquam est eu tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec quam tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis erat enim. Etiam in laoreet libero.
		</span></p>

		<p><span id="References" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel. Cras ac enim in quam bibendum interdum vel eu massa. Ut rutrum risus ac nisl lacinia eu consequat turpis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce lacus justo, volutpat sit amet vestibulum eu, convallis eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc bibendum gravida nulla vitae porta. Suspendisse sit amet dui at sapien sollicitudin faucibus. Aliquam vel urna faucibus nunc convallis facilisis dapibus vel lorem. Aenean viverra sagittis erat, ut ultrices urna iaculis in. Aliquam auctor ultrices nibh, a vestibulum lacus luctus eget. Donec a nisi eget ipsum volutpat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
		</span></p>

		<p><span id="Contact" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel. Cras ac enim in quam bibendum interdum vel eu massa. Ut rutrum risus ac nisl lacinia eu consequat turpis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce lacus justo, volutpat sit amet vestibulum eu, convallis eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc bibendum gravida nulla vitae porta. Suspendisse sit amet dui at sapien sollicitudin faucibus. Aliquam vel urna faucibus nunc convallis facilisis dapibus vel lorem. Aenean viverra sagittis erat, ut ultrices urna iaculis in. Aliquam auctor ultrices nibh, a vestibulum lacus luctus eget. Donec a nisi eget ipsum volutpat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
		</span></p>


	</div><!--end of main-content-->

	<div id="footer">
		<div id="nav_footer">
		</div><!--end of nav_footer-->
	</div><!--end of footer-->
</div><!--end of page_rap-->
</body>
</html>

cyneWATCH

I've made it on CodePen: http://codepen.io/Druid-of-Luhn/pen/wdKHv

So, here is a simple bit of code you just copy/past into the <head> tag. Just change the > into a '>'.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script&gt;
<script type="text/javascript">
$(function(){
	$('.toggle').css('display', 'none');
	$('#header_nav a').click(function(){
		$('#'+$(this).html()).addClass('selected');
		$('#main_content').children('.toggle:not(.selected)').hide();
		$('#'+$(this).html()).toggle().removeClass('selected');
	});
});
</script>

And I would change your 'main_content' div to this:

<div id="main_content">
  	<div id="header_nav">
			<ul>
				<li><a href="#">Camps</a></li>
				<li><a href="#">Register</a></li>
				<li><a href="#">References</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>

  <p id="Camps" class="toggle"><b>Camps</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel.
	 	  ...
		</p>

		<p id="Register" class="toggle"><b>Register</b><br>Aliquam erat volutpat. Quisque pretium, erat ac laoreet pulvinar, sem ipsum malesuada erat, nec tristique arcu erat molestie arcu. Aliquam ante nisi, elementum a tristique eget, imperdiet quis justo. Praesent vehicula nulla massa. Morbi quam libero, aliquam quis elementum id, egestas ultrices eros.
	 	 ...
		</p>

		<p id="References" class="toggle"><b>References</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat port a vel.
	 	...
		</p>

		<p id="Contact" class="toggle"><b>Contact</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel.
	 	 ...
		</p>

	</div>

JosiahB

Thanks So much!!!!

Michael_bonds

If you are using jQuery, you can also simple use the following:

$('someSelector').on('click', function() {
   $(this).toggle(duration);
});

Make sure to replace someSelector with an actual css selector, and duration with an actual time in milliseconds.

cyneWATCH

Just using toggle isn't enough: he wants all other elements to be hidden when you click that one as well, not just itself.

treehouse : what would you like to learn today?

Forums

Help with re-hiding the element after it has appeared