I've done a jQuery tutorial and have made some changes via CSS. It's a pretty simple Q&A list, in fact so simple that I did the entire thing with Notepad. I want to change some other things and find out if what I've done is copacetic. Here's the code -
<html>
<head>
<title>Testing JQuery</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquer
y.min.js"></script>
<style>
body {
margin:0px 0px; padding:0px;
text-align:left;
}
#container {
background-color: 990000;
padding:10px 0px 10px 15px;
margin:0px auto;
position:relative;
width:800px;
}
#container2 {
background-color: 000000;
padding:0px 5px 0px 5px;
margin:5px 10px 0px 0px;
width:430px;
border-width:2px;
border-style:inset;
border-color:ffffff;
}
#container3 {
background-color: ffffff;
padding:0px 5px 0px 5px;
margin:0px 10px 0px 10px;
position:absolute;
top:10;
right:10;
width:300px;
}
h2 {
color: ffffff;
font-family:"Verdana",Arial,Sans-serif;
}
a {
color: ffffff;
font-size:1.3em;
font-family:"Verdana",Arial,Sans-serif;
}
#container3 .link a{
color: 000000;
font-size:1.0em;
}
p {
color: 000000;
font-size:1.0em;
font-family:"Verdana",Arial,Sans-serif;
}
#odd {
color: 00ccff;
font-size:1.2em;
text-decoration:underline;
background-color: 303030;
}
#even {
color: 00ccff;
font-size:1.2em;
text-decoration:underline;
background-color: 505050;
}
dd {
color: white;
font-size:1.2em;
}
</style>
<script>
$(document).ready(function(){
$("dd").hide();
$("dt").click(function(){
$(this).next().toggle();
});
});
function showall()
{
$("dd").show();
}
</script>
</head>
<body>
<div id="container">
<h2>My First jQuery Tutorial</h2>
<a href="#" onclick="showall();" id="linkshowall">Expand
all</a>
<div id="container2">
<dl>
<dt id="odd">Question number one</dt>
<dd>Answer to first question</dd>
<dt id="even">Question number two</dt>
<dd>Answer to second question</dd>
<dt id="odd">Question number three</dt>
<dd>Answer to third question</dd>
<dt id="even">Question number four</dt>
<dd>Answer to fourth question</dd>
<dt id="odd">Question number five</dt>
<dd>Answer to fifth question</dd>
<dt id="even">Question number six</dt>
<dd>Answer to sixth question</dd>
<dt id="odd">Question number seven</dt>
<dd>Answer to seventh question</dd>
<dt id="even">Question number eight</dt>
<dd>Answer to eighth question</dd>
<dt id="odd">Question number nine</dt>
<dd>Answer to ninth question</dd>
<dt id="even">Question number ten</dt>
<dd>Answer to tenth question</dd>
<dt id="odd">Question number eleven</dt>
<dd>Answer to eleventh question</dd>
<dt id="even">Question number twelve</dt>
<dd>Answer to twelveth question</dd>
</dl>
</ div>
<div id="container3">
<p class="link">This was actually a fun tutorial. I found it
out on <a href="http://www.webmonkey.com/"
target="_blank">Webmonkey.com</a> and it went pretty smooth.
Because it was so simple I did the whole thing with nothing
more than NotePad. The basic tutorial gives you the "Expand
all" function and 3 questions/answers. I added to the list
to end up with a dozen, did some css styling and put this
text in so it wouldn't look quite so bare. I do wish I knew
enough jQuery to put the questions/answers in alternating
color rows <b>(DONE!)</b> and have the text background
change color on hover (with a pointer). Also I would like to
add a "Collapse all" function but that will have to wait for
my knowledge base to improve.
</ div>
</ div>
</body>
</html>What I have been trying to do is explained in div container3. Just to clarify:
1. Make a hover state on the dt tags that will give me a finger pointer.
2. Make the dt tags either change color on hover or change background color.
3. Add a "Collapse all" option although I think I know how to do that.
This is my first exposure to jQuery but the basics of it seem pretty straightforward. Also I've done the alternating color rows with CSS but am not sure that's the best way to go about it. Tips and suggestions are welcome. Thanks in advance.