jQueryのアコーディオンメニュー作成

概要

案件でjQueryを使用してアコーディオンメニューを作成したのでメモ

index.html

<div class="">
	<p class="">a</p>
	<p class="">b</p>
	<p class="">c</p>
</div>
<div class="accordion close">閉じる</div>

accordion.js

$(function(){
    $('.accordion').click(function(){
        $(this).toggleClass('close open');
        if ($(this).hasClass('open')) {
            $(this).text('詳細');
        }
        if ($(this).hasClass('close')) {
            $(this).text('閉じる');
        }
        $(this).prev('div').slideToggle();
    });
});

toggleClass()はカンマ区切りで複数のクラスを制御できるらしい