［JS覚書］タイトルのプラスマイナスの背景画像が切り替わるJQueryアコーディオンコンテンツ

2012年11月1日2013年5月11日

以前Q&A的なページでこんなのを作ったのですが、今度はもう少し中身が長めなものが必要となりました。

［JS覚書］Q&AページでJqueryのアコーディオン仕様を実装 – ponnao-clip

たまたまアンテナにひっかかったのですが(^^;、このページの最下部のコメント欄ボタンと同じ仕様にしたいなと。

薄くロールオーバーして、「＋」と「－」がそれぞれ切り替わる仕様です。
「－」に中身が表示されています。

前に使ったのを修正できないかとも思ったのですが、知識不足で無理でした(TдT)
似た仕様を説明してるページをなんとか見つけてきたー。

jQueryで簡単アコーディオンをつくってみた | 学び続けるweb制作者の独り言

カスタマイズしたスクリプトタグ

WordPressのサイトですが、分岐の関係でスクリプトタグにして、フッターに貼り付けました。
recordというスラッグのページだけに表示させるようにしています。
他の仕様で読み込んでる場合は、最初のjqueryのタグはいらないかも。

<?php if(is_page( array(record))): ?>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".ac dt").click(function(){
        if($(this).is(".plus")){
            $("+dd",this).slideToggle("slow");
            $(this).removeClass("plus");
            $(this).addClass("minus");
        }else{
            $("+dd",this).slideToggle("slow");
            $(this).removeClass("minus");
            $(this).addClass("plus");
        }
    }).next().hide()
});
</script>
<?php endif; ?>

大きく変えたとこは以下です。

・JS記述で「dt」だけの指定だと、他にdtを使ってる場所も適用されてしまうので（自分の場合はメインメニューが見えなくなりました）dlのクラスも付記しました。
「.ac dt」としています。

・クラス名「tasu」を「plus」に、「hiku」を「minus」に変更しています。

カスタマイズ後のhtmlソース

<dl class="ac">
<dt class="plus">アコーディオンのタイトル</dt>
<dd>
アコーディオンの中身
</dd>

カスタマイズ後のCSS（vicuna）

元ソースにはロールオーバー仕様が付いてなかったので、それを追加してます。
dtに「cursor:pointer;」を追加、「dt.plus:hover、dt.minus:hover」にそれぞれ色薄めのon画像を設定してます。
vicuna調整してるので、余白などはよきにはからってください。

div.textBody dl.ac dt{
	padding-top:5px;
	padding-bottom:5px;
	border:none;
	cursor:pointer;
	padding-left:30px;
	width:700px;
	display:block;
}
 
div.textBody dl.ac dt.plus{
	background:url(images/custom/ac_dt_plus.gif) no-repeat left center;

}

div.textBody dl.ac dt.plus:hover{
	background:url(images/custom/ac_dt_plus_on.gif) no-repeat left center;
}


div.textBody dl.ac dt.minus{
	background:url(images/custom/ac_dt_minus.gif) no-repeat left center;
}

div.textBody dl.ac dt.minus:hover{
	background:url(images/custom/ac_dt_minus_on.gif) no-repeat left center;
}


div.textBody dl.ac dd{
	padding:10px 10px 10px 50px;
}

矢印の上下で切り替えるバージョン

ご参考まで。plus＝上向き矢印、minusが下向き矢印のバージョンです。
おまけで、Q1、Q2・・・の番号が付けられるようにしました。

スクリプト

<?php if(is_page( array('trunk','jimu'))): ?>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".ac dt").click(function(){
        if($(this).is(".plus")){
            $("+dd",this).slideToggle("slow");
            $(this).removeClass("plus");
            $(this).addClass("minus");
        }else{
            $("+dd",this).slideToggle("slow");
            $(this).removeClass("minus");
            $(this).addClass("plus");
        }
    }).next().hide()
});
</script>
<?php endif; ?>

html

<dl class="ac">
<dt class="plus"><span class="qn">Q1</span>質問が入ります。</dt>
<dd>答えが入ります。</dd>
・・・
</dl>

CSS

div.textBody dl.ac {
	border:none;
}	
		
div.textBody dl.ac dt{
	padding-top:5px;
	padding-bottom:5px;
	border:none;
	cursor:pointer;
	width:700px;
	display:block;
}
 
div.textBody dl.ac dt.plus{
	background:url(images/custom/ac_dt_plus.gif) no-repeat left center;

}

div.textBody dl.ac dt.plus:hover{
	background:url(images/custom/ac_dt_plus_on.gif) no-repeat left center;
}


div.textBody dl.ac dt.minus{
	background:url(images/custom/ac_dt_minus.gif) no-repeat left center;
}

div.textBody dl.ac dt.minus:hover{
	background:url(images/custom/ac_dt_minus_on.gif) no-repeat left center;
}


div.textBody dl.ac dd{
	padding:10px 10px 10px 50px;
	background-image:url(images/custom/ac_dd.png);
	background-repeat: no-repeat;
	background-position: left 10px;
}

dl.ac .qn {
	color:#FFF;
	padding-left:7px;
	padding-right:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;