Seona Bellamy wrote:
Hi guys,
I'm hoping that this doesn't count as off topic, but I need some help
figuring out the best way to mark up a section of code.
<snip/>
Category
- Subcategory
- Section
- Product
- Product
- Product
- Section
- Product
- Product
- Subcategory
- Section
- Product
- Product
Category
- Subcategory
...etc...
Without question, nested listed are the way to go. I think with this
structure, a dl is more meaningful than a ul (more hooks, too). Sever
side functionality can be added as a back-up for when JavaScript isn't
available (not the case here). To do so all the dt's and the inner most
dd's need to be links (which also allows ":hover" in browsers with weak
CSS support).
(Note: there might be some typos.)
Key JavaScript:
function clicked(elem) {
if (elem.parentNode.className == "closed") {
elem.parentNode.className = "open";
} else{
elem.parentNode.className = "closed";
}
return false;
}
var expList = document.getElementById("expList");
var headings = expList.getElementsByTagName("dt")
for (var i=0; headings.length > i; i++){
headings[i].onclick = "clicked(this)";
}
Key CSS
.closed dd {
display : none;
}
Key HTML:
<dl id="expList">
<dt>Category</dt>
<dd>
<dl>
<dt>Subcategory</dt>
<dd>
<dl>
<dt>Section</dt>
<dd>Product</dd>
<dd>Product</dd>
</dl>
</dd>
<dd>
<dl>
<dt>Section</dt>
<dd>Product</dd>
<dd>Product</dd>
</dl>
</dd>
</dl>
</dd>
...
******************************************************
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
