SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collapsing definition lists

    Is it possible to collapse a definition list?
    I want to be able to hide/show the <DD> by clicking on the <DT> is this possible using a bit of css and/or javascript?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML: structure and semantics
    CSS: presentation
    &#74;avaScript: behaviour

    This is behaviour, so the question ought to be posted in the JavaScript forum.

    In short: yes, it's possible by using JavaScript to dynamically change the CSS of the DD elements.
    Birnam wood is come to Dunsinane

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your preaching to the converted here Tommy.

    My main issue is down to specifity.

    eg

    Code:
    <dl>
    <dt>Internal links</dt>
    <dd>link1</dd>
    <dd>link2</dd>
    <dd>link3</dd>
    <dd>link4</dd>
    </dt>External links</dt>
    <dd>link1</dd>
    <dd>link2</dd>
    <dd>link3</dd>
    <dd>link4</dd>
    </dl>
    I would like the default display to be just the <dt> with the <dd> hidden, obviously I would have to use a javascript click event to toggle display on/off on the <dd> but what selectors would you use in your css?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The easiest way would be for the event handler to simply set the .style.display property to "none" to hide the DDs, and to "block" to show them. You wouldn't need any external CSS.
    Birnam wood is come to Dunsinane


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
  •