image accordion per click

by Marcel Ferdinand

HTML

<script src="http://1.s3.envato.com/files/7334489/js/accordion.js"></script>
<div class="accordion">
    <div class="holder">
        <div class="block">
            <div class="content_holder" src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/chapaev.jpg&w=651&h=400">
                <div class="image">
                    <img src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/chapaev.jpg&w=651&h=400" />
                </div>
            </div>
        </div>
        <div class="block">
            <div class="content_holder" src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/big2.jpg&w=651&h=400">
                <div class="image">
                    <img src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/big2.jpg&w=651&h=400" />
                </div>
            </div>
        </div>
        <div class="block">
            <div class="content_holder" src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/shopsale_0.jpg&w=651&h=400">
                <div class="image">
                    <img src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/shopsale_0.jpg&w=651&h=400" />
                </div>
            </div>
        </div>
         <div class="block">
            <div class="content_holder" src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/shopsale_0.jpg&w=651&h=400">
                <div class="image">
                    <img src="http://kuv.me/wp-content/plugins/simple-post-thumbnails/timthumb.php?src=http://kuv.me/wp-content/gallery/slider/shopsale_0.jpg&w=651&h=400" />
               ...

CSS

.accordion {
    position: relative;
    overflow:hidden;
}

.accordion *{
    margin:0;
    padding:0;
    font-style:normal;
    text-decoration:none;
}

#border{
    background-color:#242424;
    
    /*for firefox, chrome and safari*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    
    padding:10px;
    
}

.accordion .holder{
    position: absolute;
    top: 0; left: 0;
}

.accordion .holder .block .shadow{
    position: absolute;
    background-image:url(../images/ui/shadow.png);
    background-repeat:no-repeat;
    background-position:right;
    
    width:200px;
    height:315px;
}

.accordion .holder .block{
    position:absolute;
    float:left;
    
    width:50px;
    height:315px;
    
    background-color:#FFFFFF;
    
    overflow:hidden;
}

.loading{
    width:32px;
    height:32px;
    margin:0 auto;
    float:left;
}

.accordion .holder .content{
    position:absolute;
}

.accordion .holder .content_holder{
    position:absolute;
}

.accordion .holder .image{
    position:absolute;
}
.accordion .holder .cover{
    position:absolute;
    background-color:#000000;
}

.accordion p{
    font-family: Candara;
    font-size:18px;
    font-weight:bold;
    color: #2c2c2c;
    text-align:right;
}
.accordion p br{
    line-height:0px;
}
.accordion .box{
    background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
       zoom: 1;
      
    background: rgba(0, 0, 0, 0.5);
    display:block;
    
    width:inherit;
}


.accordion .box p{
    font-family: Arial;
    
    
    color: #ffffff;
    text-align:left;
    
    padding-left:20px;
    padding-right:20px;
    padding-bottom:10px;
}

.accordion .box p.title{
    font-family: Arial;
    font-size:18px;
    font-weight:bold;
    
    padding-top:10px;
}

.accordion .box p.text{
    font-family: Arial;
    font-size:14px;
   ...

JavaScript

$(".accordion").accordion({
    width:651,
    height:400,
    barSize:40,
    cover:true,
    coverAlpha:1,
    shadow:false,
    shadowAlpha:1,
    border:true,
    borderSize:1,
    borderColor:"#242424",
    transitionTime:0.3,
    autoplay:true,
    autoplayTime:5,
    changeType:"click"
});