RADI!!

by lovromar

HTML

<div class="item">
    <a href="">Track1<span>Stop</span><b>play</b> <br></a>
</div>

<div class="item">
    <a href="">Track2 <span>Stop</span><b>Play</b><br></a>
</div>
    
<div class="item">
    <a href="">Track3 <span>Stop</span><b>play</b><br></a>
</div>
    
<div class="item">
    <a href="">Track4 <span>Stop</span><b>play</b><br></a>
</div>

CSS

a {
    
   display:block;
    width:100%;
    background-color:gray;
    color:white;
    margin-bottom:3px;
    height:40px;
    line-height:40px;
    padding-left:20px;
}

.klik {
    
    background-color:red;
}
span {
    
   margin-left:10px;
}

b {
    
    margin-left:10px;
}

JavaScript

$('.item span').hide();
$('.item b').show();

   


$('.item a').click(function(e){
    
$(this).toggleClass('klik').parent().siblings().find('a').removeClass('klik');
    
    
    e.preventDefault();
    // sakrij spanove
    var $this = $(this).parent().find('span,b');
    


    
    
    $(".item span").not($this).hide();
    $(".item b").not($this).hide();
    $(".item b").not($this).show();
    

    
    // toglaaj
    $this.toggle();
    
    
    
});