JQuery UIを使用しないJQueryアコーディオン

Question

JQuery UIを使用せずにJQueryを使用してアコーディオンを作成しようとしましたが、アコーディオンは機能しません。

HTML

 <div id="accordion"> 
     <button class="accordionButton">Button</button> 
      <div class="accordionContent"> 
       <p>Text</p> 
      </div> 

     <button class="accordionButton">Button</button> 
      <div class="accordionContent"> 
       <p>Text</p> 
      </div> 

jQueryの

$('#accordion').find('.accordionButton').click(function(){ 

     $(this).next().slideToggle('fast'); 

     $(".accordionContent").not($(this).next()).slideUp('fast'); 

    }); 

ページが読み込ま正しく隠されたアコーディオンのコンテンツが、情報は表示されませんaccordionButtonsのいずれかを選択しています。クリックで

Answer 1

シンプルなスライド機能：jQueryのUIが動作するアコーディオンのために必要とされるように

$(document).ready(function() { 
 
    $('#accordion .accordionButton').click(function() { 
 
    var content = $(this).closest('.content').find('.accordionContent'); 
 
    $('#accordion .accordionContent').not(content).slideUp(); 
 
    content.slideDown(); 
 
    }); 
 
});

#accordion .content .accordionContent { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="accordion"> 
 
    <div class="content"> 
 
    <button class="accordionButton">Button</button> 
 
    <div class="accordionContent"> 
 
     <p>Text</p> 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    <button class="accordionButton">Button</button> 
 
    <div class="accordionContent"> 
 
     <p>Text</p> 
 
    </div> 
 
    </div> 
 
</div>