jQueryを利用したアコーディオンメニュー

• クリックすることで開閉するメニューを作成する。
• DEMO PAGE

• ある要素の次の要素を、クリックをキーに出現・隠蔽する。
• 開閉とともに画像も変更する。
• class='boxTitle'の次の要素がデフォルトで隠れる。

<div class="accordionBox1">
 <h3 class="boxTitle">アコーディオンサンプル１</h3>
 <p class="boxContents">出現・隠居を繰り返します( ﾟдﾟ)ﾊｯ!<br>(/ω・＼)ﾁﾗｯ<br><br><br>( ﾟдﾟ)ﾊｯ!</p>
</div>

.accordionBox1{
 width: 600px;
 margin: 0 0 50px 0;
}
.accordionBox1 .boxTitle{
 border: 1px solid #cccccc;
 border-bottom: 2px solid #e3297d;
 padding:10px 0 10px 50px;
 cursor: pointer;
 /*画像はjQueryで入れ替える*/
 background: url('../img/48plusBlue.png') no-repeat;
}
.accordionBox1 .boxContents{
 border-left: 1px solid #cccccc;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding:10px  25px ;
}

$(document).ready(function(){
 /* ◯class = 'boxTitle' をクリックしたら実行 */
 $('.boxTitle').click(function(){
  /* ◯次の要素を出現させる */
  $(this).next().animate(
   { height: "toggle", opacity: "toggle" }
   ,"slow"
  );
  /* $this.next().toggle('slow'); でも同じ */
     
  /* ◯＋と-の画像切替 */
  if($(this).css('background-image') == "url(http://phoenibir.com/jqueryWorkshop/accordion1/img/48minusBlue.png)"){
   $(this).css("background", "url('img/48plusBlue.png') no-repeat");
  }else{
   $(this).css("background", "url('img/48minusBlue.png') no-repeat");
  }
 }).next().hide(); /* ◯ページ読み込み時はかくしておく */
});