This is another set of code snippets from my current JQuery-heavy design project. The site which I’m working on requires a set of divs containing information about a list of concepts; ideally, each of these divs would appear when the applicable item in a menu was clicked.
As before, I’ll give the general layout and then talk through the code:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Divs!</title>
<style>
#menu { float: left; width: 200px; }
#content { width: 500px; margin-left: 210px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.content_div').hide();
$('#intro').show();
$('#menu a').click(function(event) {
event.preventDefault();
$('.content_div').hide();
var thisID = this.id;
var div_id = "#" + thisID + "_div";
$(div_id).show();
});
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#html_div" id="html">HTML</a></li>
<li><a href="#css_div" id="css">CSS</a></li>
<li><a href="#javascript_div" id="javascript">JavaScript</a></li>
</ul>
</div><!-- END MENU -->
<div id="content">
<div id="intro" class="content_div">
<h1>Introduction!</h1>
<p>This paragraph is some introductory text which is all that will be shown when the page loads. The menu at right will reveal the other divs located on this page, which are otherwise hidden from view.</p>
</div><!-- END INTRO -->
<div id="html_div" class="content_div">
<h1>HTML!</h1>
<p>HTML, which stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content. It can include or can load scripts in languages such as JavaScript which affect the behavior of HTML processors like Web browsers; and Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit presentational markup.</p>
</div><!-- END HTML -->
<div id="css_div" class="content_div">
<h1>CSS!</h1>
<p>Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.</p>
</div><!-- END CSS -->
<div id="javascript_div" class="content_div">
<h1>Javascript!</h1>
<p>JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with.</p>
</div><!-- END CSS -->
</div><!-- END CONTENT -->
</body>
</html>
Click here for an example of what this looks like.
So what are we dealing with here?
The HTML is pretty simple. We have a menu based in an unordered list, with list items with a within-page target and an ID. This is followed by a div containing the content, each section of which is contained within its own div. These divs are given an ID matching the targets of the menu list (so that, with Javascript disabled, the links will still lead to the appropriate area of the content) and a common class, “content_div.” This is then styled into two columns with the menu on the left-hand side.
The JQuery is also quite straightforward.
We begin by setting all of the content_divs to be hidden, and then call the intro div into visibility, on document-ready:
$(document).ready(function() {
$('.content_div').hide();
$('#intro').show();
After that, we must attach an event to each of the links in the menu list. This event causes the following things to happen, in order:
– The usual action of the link is prevented (so that it doesn’t actually go anywhere).
– All of the divs with the class “content_div” are hidden (thus guaranteeing that whatever is currently shown will disappear.
– The code retrieves the ID of the link that was clicked.
– The code creates a new variable representing the ID of the relevant div (i.e. by attaching “_div” to the end).
– The relevant div is searched for and shown.
$('#menu a').click(function(event) {
event.preventDefault();
$('.content_div').hide();
var thisID = this.id;
var div_id = "#" + thisID + "_div";
$(div_id).show();
;});
});
And that’s it. Simple div-fetching plugin. As always, if you have any comments, find any of this unclear, or have a suggestion on how to make it work more cleanly, feel free to leave a message on this post and let me know!