FINAL To je to

by lovromar

HTML

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

<div class="item">
    <a href="">Track2 <span class="prvi">Stop</span><span class="drugi">Play</span><br></a>
</div>
    
<div class="item">
    <a href="">Track3 <span class="prvi">Stop</span><span class="drugi">play</span><br></a>
</div>
    
<div class="item">
    <a href="">Track4 <span class="prvi">Stop</span><span class="drugi">play</span><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 .prvi').hide();
$('.item .drugi').show();

   


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


    
    
    $(".item .prvi").not($this).hide();
    $(".item .drugi").not($this).hide();
    $(".item .drugi").not($this).show();
    

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