FAQ Template Using JQuery
/skill level/
/viewed/
0 Times
This is the final version of the FAQ example started with the Basic JQuery HTML code. This was created for use in the introduction to JQuery tutorial. The tutorial uses this code example as the final stage of creating a FAQ template using the JQuery UI web framework.
This code is in a wiki. If you have any advances to make to the original tutorial and code, please feel free to contribute.
What it Looks Like
The Code
<html>
<head>
<title>Create An Expanding FAQ With JQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style>
// CSS goes here
</style>
<script>
$(document).ready(function(){
$("dd").hide();
$("dt").click(function(){
$(this).next().toggle();
});
});
function showall()
{
$("dd").show();
}
</script>
</head>
<body>
<a href="#" onclick="showall();" id="linkshowall">Expand all</a>
<dl>
<dt>Question number one</dt>
<dd>Answer to first question</dd>
<dt>Question number two</dt>
<dd>Answer to second question</dd>
<dt>Question number three</dt>
<dd>Answer to third question</dd>
</dl>
</body>
</html>
- This page was last modified 20:41, 5 September 2008.