SO - 22852879

by Andrew Gerst

HTML

<ul class="list">
    <li><a href="#">Panel 1</a></li>
    <li><a href="#">Panel 2</a></li>
    <li><a href="#">Panel 3</a></li>
</ul>
<dl class="accordion">
    <dt><a href="">Panel 1</a></dt>
    <dd><img src="https://www.gravatar.com/avatar/a97970791c010720956ead9e2beff57e?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
    <dd><img src="https://www.gravatar.com/avatar/a97970791c010720956ead9e2beff57e?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
    <dd><img src="https://www.gravatar.com/avatar/a97970791c010720956ead9e2beff57e?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
    <dt><a href="">Panel 2</a></dt>
    <dd><img src="https://www.gravatar.com/avatar/a97970791c010720956ead9e2beff57e?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
    <dt><a href="">Panel 3</a></dt>
    <dd><img src="https://www.gravatar.com/avatar/a97970791c010720956ead9e2beff57e?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</dd>
    <dd><img src="https://www.gravatar.com/avatar/a97970791c010720956ead9e2beff57e?s=48&amp;d=identicon&amp;r=PG" alt="" width="24" height="24" class="avatar-me js-avatar-me">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.</dd>
    <dd><img...

SCSS

.list {
    list-style-type: none;
}

.accordion {
    margin: 50px;
    dt, dd {
        border: 1px solid black;
        border-bottom: 0;
        padding: 10px;
        text-overflow: ellipsis;
        a {
            color: black;
            display: block;
            font-weight: bold;
        }
    }
    dt {
        border-bottom: 1px solid black;
    }
    dd {
        border-top: 0;
        display: none;
        font-size: 20px;
        margin-left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:last-of-type {
            border-bottom: 1px solid black;
            # border-top: 1px solid white;
            # position: relative;
            # top: -1px;
        }
    }
}

JavaScript

(function ($) {

    var allPanels = $('.accordion > dd').hide();

    var $as = $('.accordion > dt > a').click(function () {
        allPanels.slideUp();
        $(this).parent().nextUntil('dt').slideDown();
        return false;
    });

    $('.accordion dt a').first().click();

    $('.list li').click(function(e){
        e.preventDefault();
        $as.eq($(this).index()).click();
    });
    
})(jQuery);