ネストされたdivをクリックするとjqueryと連携しません

Question

シンプルなアコーディオンがあります。それは働いていたが、私はボタン領域の周りにdivを追加しなければならなかった、そして今、クリックイベントは全く働いていない。どんな助けも素晴らしいだろう。

<div class="accordion-ctn clearfix"> 
    <div class="accordion-button-ctn"><div class="accordion-button"><div class="title">Song Title 1</div></div><div class="button_ctn"><ul><li class="play_button"><a href="#">Play<img src="../../images/playBtn.png" alt="Play Button" /></a></li><li class="download_button"><a href="#">Download<img src="../../images/downloadBtn.png" alt="Download Button" /></a></li></ul></div></div> 
    <div class="accordion-content"> 
     Content here 
    </div> 
    </div> 
</div> 

$('.accordion-button').click(function() { 
    $('.accordion-button').removeClass('on'); 
    $('.accordion-content').slideUp('normal'); 
    if($(this).next().is(':hidden') == true) { 
    $(this).addClass('on'); 
    $(this).next().slideDown('normal'); 
    } 
}); 

Answer 1

これは何ですか？ http://jsfiddle.net/SSBd4/