CODEWITHSUNDEEP
jqueryhtml
Jackson
Jackson

Reputation: 3518

What is the best way to use jQuery's slideUp/slideDown with a Definition List

I have a definition list as follows:

<dl>
    <dt>Status</dt>
    <dd>Blue</dd>
    <dt>Last Updated</dt>
    <dd>16/05/2013</dd>
    <dt>Overview/summary:</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis amimus lacus sed imperdiet consequat, orci nisl pretium nunc, sed lobortis ligula neque. Quisque vitae sem dolor scelerisque urna. Integer placerat scelerisque ipsum. Aliquam imperdiet interdum magna eget vulputate. Donec interdum tincidunt tortor, eget condimentum magna suscipit et. Curabitur bibendum elit sit amet nisi pharetra vitae venenatis metus</dd>
    <dt>Past Dates:</dt>
    <dd>16/05/2013, 15/05/2013, 14/05/2013</dd>                  
    <dt>Future Dates:</dt>
    <dd>United Kingdom</dd>
</dl>

I need to use a show/hide type effect to show and hide the second half of the list.

ie. from 'Overview/summary' downwards.

I would like to wrap the collapsible information in a div like this:

<dl>
    <dt>Status</dt>
    <dd>Blue</dd>
    <dt>Last Updated</dt>
    <dd>16/05/2013</dd>

    <div class="js-collapsible">
        <dt>Overview/summary:</dt>
        <dd>Lorem ipsum dolor sit amet</dd>
        <dt>Past Dates:</dt>
        <dd>16/05/2013, 15/05/2013, 14/05/2013</dd>                  
        <dt>Future Dates:</dt>
        <dd>United Kingdom</dd>
    </div>

</dl>

but does this make sense semantically? I feel this approach is compromising the structure.

Any suggestions would be great :)

Thanks

Upvotes: 0

Views: 130

Answers (2)

dsgriffin
dsgriffin

Reputation: 68626

It wouldn't make sense semantically as it's incorrect markup:

dl - Permitted contents - Zero or more of: one or more dt elements, followed by one or more dd elements.

Just give a class to that particular dt:

<dt class="thisOne">Overview/summary:</dt>

Then you could use prevAll and nextAll:

$('.thisOne').nextAll().hide();

or

$('.thisOne').prevAll().hide();

Upvotes: 1

bipen
bipen

Reputation: 36551

you can add a class to dt and use nextAll() to select all the elements after that..addBack() to add the specified dt elements .

 $("dt.classname").nextAll().addBack().hide();

or use eq() if you are sure to hide the third dt element

 $("dt:eq(2)").nextAll().addBack().hide();

Upvotes: 1

Related Questions