Question

I haven’t been able to figure out (or find) a solution for the following scenario:

We have a dl like so:

<dl>
    <dt>Term</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dd>Item 4</dd>
        <dd>Item 5</dd>
    <dt>Term</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dd>Item 4</dd>
        <dd>Item 5</dd>
</dl>

We need to hide all dds after the first 3 for each dt group and show a “view more” link that will toggle visibility on the remaining.

Any tips would be greatly appreciated!

Answer 1

Thanks everyone for the help. This is what we ended up going with:

$(function(){
    $("dt").each(function(){
        var $dd = $(this).nextUntil("dt");
        if ($dd.length > 3 && $('input:checked', $dd).length < 1) {
            $dd.filter(":gt(2)").hide();
            $dd.last().after($("<dd class='t'>View More</dd>").click(function(e){
                e.preventDefault();
                $(this).text($(this).text() == "View More"?"Hide More":"View More").prevAll("dt:first").nextUntil("dt").filter(":gt(2):not('dd.t')").toggle()
            }).css({'cursor':'pointer', 'color':'#0000FF'}));
        }
    });
});