SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)

    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>
    ....
    </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..

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    I am with Ryan on this, but yet.. if you see the Spry demos, ,they are all divs..

    http://labs.adobe.com/technologies/s...ionSample.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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •