jQuery Tabs list

by ajinkyax

HTML

<dl>
    <dt>que 1</dt>
    <dd>some answers...</dd>

    <dt>que 2</dt>
    <dd>some answers...</dd>

    <dt>que 3</dt>
    <dd>some answers...</dd>

    <dt>que 4</dt>
    <dd>some answers...</dd>

    <dt>que 5</dt>
    <dd>some answers...</dd>
</dl>

CSS

body { font-family: Helvetica;}
dl { width: 400px; margin: auto;}
        dt { padding: 5px; background: #b3d4fc; color: #333333; border-bottom: 1px solid #999999; cursor: pointer; font-size: 14px; text-transform: uppercase;}
        dd { padding: 5px; background: #cccccc; color: #333333; margin: 0;}

JavaScript

(function(){
        var dd = $('dd');
        dd.filter(':nth-child(n+4)').hide();
        $('dl').on('mouseenter', 'dt', function(){
            $(this).next().slideDown(200).siblings('dd').slideUp(200);
        });
    })();