test jop 88

by joppieb

HTML

<div class="knop" id="one">
knop 1
<div class="block" id="bone" style="opacity:1"></div>
</div>
<div class="knop" id="two">
knop 2
<div class="block" id="btwo"style="opacity:1"></div>
</div>
<div class="clear"></div>

CSS

.knop{
    height:20px;
    width:60px;
    background-color:#FFC000;
    float:left;
    margin-right:12px;
}

.block{
    height:60px;
    width:60px;
    background-color:#CCCCCC;
    float:left;
    margin-right:12px;

}

.clear{
    clear:both;
    
}

JavaScript

$(document).ready(function(){
$('.knop').click(function(){ 
if($('.block').css('opacity') == 1){    
$('.block').animate({opacity: 0}),function(){
$(this).animate({opacity: 1})  
    }
}else{
$('.block',this).animate({opacity: 1})    

};
});
});