ボタンをセクションを崩壊させるにはどうすればいいですか？

Question

今、私は自分のウェブページ上のいくつかの場所でこのアコーデオンを使用しています。現在、開いているときは、アコーディオンの内側をクリックすると折りたたまれます。私は、アコーデオンの上部部分、実際にはボタン部分が崩壊して、アコーデオンのコンテンツにリンクやその他のものを追加できるようにしたいと思います。ここで https://jsfiddle.net/nc4euge3/

それはそれなしでjsのフィドルにリンクすることはできませんので、いくつかのコードです：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<div class="accordion"> 
    <div class="accordion-item"> 
     <div class="accordion-button"> 
      <h3> 
      <div class="accordion-marker"><i class="fa fa-plus"></i></div><span class="question">Thing #1</span> 
     </h3> 
    </div> 
    <p> 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
     text text text text text text text 
    </p> 
</div> 

Answer 1

あなたはそこに小さな微調整が必​​要になります - ボタンをクリックし、全体ではなくアコーディオン項目に耳を傾けます。

チェックデモ - https://fiddle.jshell.net/ermakovnikolay/nc4euge3/2/

$(document).ready(function() { 
    var $accordion = $('.accordion .accordion-item'); 
    $('.accordion-button').click(function() { /* change to the button */ 
     var $this = $(this).parent(); /* update to get the accordion item container */ 
     if ($this.hasClass('active')) { 
      $this.removeClass('active').find('i').removeClass('fa-minus').addClass('fa-plus'); 
     } else { 
      $accordion.removeClass('active'); 
      $this.addClass('active'); 
      $accordion.find('i').removeClass('fa-minus').addClass('fa-plus'); 
      $this.find('i').addClass('fa-minus') 
     } 
    }); 
});