jQuery: expandable portfolio

by gabrieleromanato

HTML

<div id="portfolio">
    <div class="row">
        <div class="item" data-rel="0">1</div>
        <div class="item" data-rel="1">2</div>
        <div class="item" data-rel="2">3</div>
    </div>
    <div class="details"></div>
    <div class="row">
        <div class="item" data-rel="3">4</div>
        <div class="item" data-rel="4">5</div>
        <div class="item" data-rel="5">6</div>
    </div>
    <div class="details"></div>
    <ul id="portfolio-details">
        <li>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
        <li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
        <li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
        <li>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
        <li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
        <li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
    </ul>
</div>

CSS

#portfolio {
    margin: 2em 0;
    width: 100%;
}

#portfolio div.row {
    margin-bottom: 1em;
    height: 15em;
}

#portfolio div.details {
    display: none;
    padding: 5%;
    margin: 0.5em;
    background: #f5f5f4;
}

#portfolio div.row div.item {
    width: 30%;
    float: left;
    height: 100%;
    margin: 0 1.5%;
    background: #eee;
    text-align: center;
    font-size: 4em;
    line-height: 4;
    cursor: pointer;
}

#portfolio #portfolio-details {
    position: absolute;
    top: -9999px;
}

JavaScript

var Portfolio = {
    Elements: {

        items: $('div.item', '#portfolio'),
        details: $('#portfolio-details', '#portfolio')

    },

    fn: {

        select: function() {

            Portfolio.Elements.items.each(function() {

                var $item = $(this);
                var $row = $item.parent();
                var $details = $row.next('div.details');
                var $li = $('li', Portfolio.Elements.details);


                $item.click(function() {

                    $('div.details').hide();
                    $details.empty();
                    var $html = $li.eq($item.data('rel')).html();
                    $details.html($html).slideDown(600);
                    $('html, body').animate({
                        scrollTop: 0
                    }, 0).animate({
                        scrollTop: $details.offset().top
                    }, 300);

                });




            });


        }


    }

};

Portfolio.fn.select();