Member Avatar for rachaael

I am working on a really simple website, and each page has a clickable header that displays a different paragraph of text (ex: ABOUT US/ OUR STAFF.. 'ABOUT US' displays about paragraph, 'OUR STAFF' displays short descriptions of the staff in a paragraph). What is the best way to go about doing this? Since the design calls for a non-web friendly font, the header is two separate images (about us is one and our staff is another). All I need to do is change the paragraph text depending on which header image is selected. I managed to get the header images to change on mouse over, so that part is done. I only need to change the paragraph text.

Thanks!!
Rachael

  • 2 Contributors
  • 1 Reply
  • 90 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by mschroeder
Member Avatar for mschroeder

I see three options that you could pursue but since you posted this in the Javascript forum I'll assume you are not looking for a serverside solution using php etc., correct me if I'm wrong.

With javascript you have two options, you could load the content for both pages into two div's and then hide one and show the other and vice versa when the heading is checked.

The other options would be to load the content with AJAX, but that is probably way to complicated for what you're looking to do.

I personally really like working with jQuery so this example is done using jQuery.

<!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=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#about').toggle();

	$('#imgAbout').click( function() {
		$('#about').toggle();
		$('#staff').toggle();
	});
	$('#imgStaff').click( function() {
		$('#about').toggle();
		$('#staff').toggle();
	});
	
});
</script>
</head>
<body>
<ul>
    <li id="imgAbout">Show About</li>
    <li id="imgStaff">Show Staff</li>
</ul>

<div id="about" style="display:none;">
<h1>ABOUT</h1>
</div>
<div id="staff" style="display:none;">
<h1>STAFF</h1>
</div>

</body>
</html>

Hopefully the HTML makes sense, and here is a brief focus on how the javascript works. Notice that i'm loading jQuery via the google CDN, this is so you can copy and paste the entire example and it will work on your computer. You could choose to put the actual jquery download locally if you choose to use this method.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#about').toggle();

	$('#imgAbout').click( function() {
		$('#about').toggle();
		$('#staff').toggle();
	});
	$('#imgStaff').click( function() {
		$('#about').toggle();
		$('#staff').toggle();
	});
	
});
</script>

All this does is registers a click event on the li with the id "imgAbout" and the li with the id "imgStaff"

when you click either of the li's it then toggles the display of both div's (id=about and id=staff)

initially both are set to display:none with css and then I enable the first one with this line: $('#about').toggle(); which says, toggle the display of the div with the id "about"

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.