Her portfolio image slider

by Umar

HTML

<div id="main">
    <div class="red"></div>
    <div class="green"></div>
    <div class="grey"></div>
</div>

CSS

#main{
    margin:20px;
    border:2px solid black;
    height:30px;
    overflow:hidden;
}

#main div{
    width:33%; height:100%; float:left; display: inline-block;
    -webkit-transition: all 0.5s ease-in; 
    margin-right:0.7%;
}

#main div:last-child{
 margin-right:0px;   
}

.red{background:red;}
.green{background:green;}
.grey{background:grey;}

#main .active_image{width:100%; margin-right:0%;}
#main .hidden_image { width:0%; margin-right:0%; }

JavaScript

$('#main div').click(function() {
    //console.log($(this).position());
    $(this).toggleClass('active_image');
    $('#main div').not($(this)).toggleClass('hidden_image');
    //$(this).addClass('active_image');
    
});

/*$('.active_image').live('click', function() {
    $('#main div').removeClass('active_image');
    console.log('clicked');
});*/