this may seem of topic, or maybe it’s just a topic that has many tendrils, but I have been delving into Spry and jQuery as of late. I favor the latter as it affors more flexibility with the mark up which is where my CSS/ semantics question comes in.
Many pre made accordion widgets ( a CSS/ markup / script combination ) use the following structure:
<div class=“accordion”>
<div class=“acc_btn”></div>
<div class=“acc_cntnt”></div>
<div class=“acc_btn”></div>
<div class=“acc_cntnt”></div>
…
</div>
Which, I admit is the simplest way to code the CSS and script necessary… BUT IS IT*SEMANTICALLY CORRECT?
Is an accordion not a list? or perhaps even a list of header/content? Something like:
<ul class=“accordion”>
<li class=“acc_element hide”>
<h5 class=“acc_btn”> Accordion button<h5>
<p class=“acc_cntnt”> Accordion content</p>
</li>
…
</ul>
There would a rule .hide .acc_cntnt{ display:none} or something like that which targets the content ( by the way , i suppose if there are multiple Ps involved they could be wrapped in a DIV which had the “acc_cntnt” class instead of the P)
but maybe am off about it needing to be a list… what your oppinon?
Just pondering…
In my days accordions were like magical instruments that made music; kids nowadays with their new-wave electro-CSS wizardry— I don’t know… when I was lad, you were lucky if you got a stick to play with.
If I saw a live example, I might have a better clue but I doubt it would be a definition list if following this correctly.
I am with Ryan on this, but yet… if you see the Spry demos, ,they are all divs…
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Since this is coming from the master mind web developers at Adobe… I had to question weather accordions are lists. I mean it would seem to me that they ARE… but if you google the demons they are based on DIVs. Maybe there was some semantics at play here that I dodn’t know about…
Well an accordian is technically a list of items, so I wouldn’t be using <div>'s to achieve this, perhaps a dl/dt but I’m by no means a semantics guru. I don’t know what your accordian details (you are saying there is actual content in there? Bah…need sleep
But anyway, depending on what you have in there, a dl/dt may be used, or the ul li structure you have posted (I’d be hesitant about the use of the header/paragraph tag there, but I’d have to see what you needed done with the accordian to suggest the best tag (that’d I’d use :))