accordion start

by Susan Delgado

HTML

<ul>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/" />
    </li>
</ul>

CSS

ul {
    width:460px;
    position:relative;
    list-style:none;
    border:1px solid red;
    height:200px;
    padding:0;
    margin:0 auto;
    overflow:hidden;
}
ul li.item {
    background-color:#000;
    position:absolute;
    float:left;
    width:100%;
    margin:0%;
    border:1px solid #000;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in;
}
ul li.item img {
    width:100%;
}
ul li.item img:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    opacity: 0.3;
}

JavaScript

$(function () {
    var z = 0,
        marg = 0;
    $("ul").find("li").each(function (index) {
        $(this).addClass("item").css({
            'margin-left': marg + '%',
                'z-index': z
        }).click(function () {
            $(this).css({
                'margin-left': '0',
                    'z-index': 10
            });
            //if(index > $(item).

        });
        marg = marg + 11;
        z = z + 1;

    });


});