How to make a Digg-style FAQ page with JavaScript and jQuery First take a look at the example page at Digg.com
Digg - Frequently Asked Questions
We will use the popular and brilliant JavaScript library, jQuery.
Digg is also using the same library.
First go ahead and download the latest version of jQuery here:
Downloading jQuery - jQuery JavaScript Library
Let's begin:
Here is a basic page:
HTML Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Digg-style FAQ page</title> </head> <body> </body> </html>
HTML Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Digg-style FAQ page</title> <script type="text/javascript" src="jquery.js"> </script> </head> <body> </body> </html>
HTML Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digg-style FAQ page</title>
<script type="text/javascript" src="jquery.js"> </script>
</head>
<body>
<a href="#" name="faq-1">What is Digg like FAQ?</a><br />
<div class="faq-answer" id="faq-1">It's like this: http://www.digg.com/faq<br /><br /></div>
<a href="#" name="faq-2">Is it easy to make?</a><br />
<div class="faq-answer" id="faq-2">Yes it's very easy to make!<br /><br /></div>
<a href="#" name="faq-3">Why would I want to do that?</a><br />
<div class="faq-answer" id="faq-3">And your page will be so much cleaner.<br /><br /></div>
</body>
</html>
HTML Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digg-style FAQ page</title>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css">
.faq-answer {
display:none;
}
</style>
</head>
<body>
<a href="#" name="faq-1">What is Digg like FAQ?</a><br />
<div class="faq-answer" id="faq-1">It's like this: http://www.digg.com/faq<br /><br /></div>
<a href="#" name="faq-2">Is it easy to make?</a><br />
<div class="faq-answer" id="faq-2">Yes it's very easy to make!<br /><br /></div>
<a href="#" name="faq-3">Why would I want to do that?</a><br />
<div class="faq-answer" id="faq-3">And your page will be so much cleaner.<br /><br /></div>
</body>
</html>
Code:
Code:
<style type="text/css">
.faq-answer {
display:none;
}
</style>
Code:
Code:
$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).fadeIn('slow');
} else {
$("#" + this.name).fadeOut('slow');
}
return false;
});
});
});
$(document).ready() means after the document is ready and loaded call the function passed to ready() method.
After the document is loaded jQuery will fire our function and the function walks through all the "a" tags
who's name attributes start with "faq-" and attaches an onclick event handler to them.
The event handler when fired, first checks to see if the answer is hidden or visible, in case it's hidden it
displays it with a fadeIn effect: $("#" + this.name).fadeIn('slow'); and returns false and vice versa.
The other important thing to note is that the name attribute of the links are the same as the ID of the DIVs so
we know which DIV is the answer to the clicked link.
So all together we have this:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digg-style FAQ page</title>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).fadeIn('slow');
} else {
$("#" + this.name).fadeOut('slow');
}
return false;
});
});
});
</script>
<style type="text/css">
.faq-answer {
display:none;
}
</style>
</head>
<body>
<a href="#" name="faq-1">What is Digg like FAQ?</a><br />
<div class="faq-answer" id="faq-1">It's like this: http://www.digg.com/faq<br /><br /></div>
<a href="#" name="faq-2">Is it easy to make?</a><br />
<div class="faq-answer" id="faq-2">Yes it's very easy to make!<br /><br /></div>
<a href="#" name="faq-3">Why would I want to do that?</a><br />
<div class="faq-answer" id="faq-3">And your page will be so much cleaner.<br /><br /></div>
</body>
</html>
Linear Mode
