jQuery / CSS Q&A list

Question

nospryexpert 0 Newbie Poster

14 Years Ago

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="

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.

html-css javascript:jquery web-design

1 Contributor
1 Reply
193 Views
7 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by nospryexpert

Dani AI

Generated 6 Months Ago

Good work, — the structure is sound and the JS logic is straightforward. A few concrete corrections and improvements will make the Q&A reliable, accessible, and easier to maintain:

Fix small CSS mistakes: hex colors must include # (for example #990000), and numeric layout values need units (top: 10px;). Do not reuse the same id on multiple elements (IDs must be unique); use classes or a structural selector instead.
Make dt clearly interactive: add cursor: pointer and a hover state. Use CSS :nth-of-type() for alternating rows (or add .odd / .even classes from JS) rather than repeating IDs.
Replace inline onclick attributes with unobtrusive event binding, use slideToggle() for a nicer animation, and update ARIA attributes so keyboard users know which items are open.

Example CSS (keep it short and modern):

dt { cursor: pointer; transition: background .12s ease; }
dt:hover { background: #444; color: #fff; }

dl dt:nth-of-type(odd)  { background: #303030; color: #00ccff; }
dl dt:nth-of-type(even) { background: #505050; color: #00ccff; }

Example jQuery pattern (unobtrusive + ARIA + animation):

$('dl').on('click', 'dt', function (e) {
  var $dt = $(this), $panel = $dt.next('dd');
  $panel.slideToggle(160);
  $dt.attr('aria-expanded', $panel.is(':visible'));
});
$('#expand').on('click', function(e){ e.preventDefault(); $('dl dd').slideDown(200); });
$('#collapse').on('click', function(e){ e.preventDefault(); $('dl dd').slideUp(200); });

Position the controls semantically (inside the heading area) and use buttons for Expand/Collapse; CSS flexbox (display: flex; justify-content: space-between;) keeps the layout robust across widths. Final checks: validate the HTML, ensure unique IDs if used for ARIA, and prefer progressive enhancement (keep answers visible by default and hide them on DOMReady if JS runs). These small changes improve maintainability, accessibility, and cross-browser behavior.

Reply to this topic

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.

nospryexpert 0 Newbie Poster · Answer 1 · 2011-10-03T04:41:54+00:00

Update: I figured out the "Collapse all" option but am wondering the best way to position it. Other than that I'm still working on the 2 other issues - the finger pointer for the dt tags and the color on hover or change background color. The updated code -

<html>
<head>
	<title>Testing JQuery</title>

	<script 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.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();

}

function collapseall()

{

	$("dd").hide();

}

	</script>

</head>
<body>

<div id="container">
<h2>My First jQuery Tutorial</h2>

<a href="#" onclick="showall();" id="linkshowall">Expand all</a>

<a href="#" onclick="collapseall();" id="linkcollapse">Collapse 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 <b>(DONE!)</b> but now best way to 

position it.
		</ div>
</ div>
</body>
</html>