Should accordions be lists?

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>


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>


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…

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 :))