ぱらむ・すきっちぇ

jQueryに限ってもアコーディオンメニューの記述の仕方はたくさんあるのですが、LIGブログさんの記事を参考にさせていただいて

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->
			追記部分がここに表示されます（cms:id="more" はSoyMCSで使用するブロックコード）
		<!-- /cms:id="more" -->
	</dd>
</dl>

/* CSS */
/* dl.read_more 子要素 dt 「続きを読む」のアイコンと文字色初期状態 */

dl.read_more dt {
	cursor:pointer;
	background:url(../img/mark-more.gif) left top no-repeat;
	padding: 1px 0 1px 16px;
}
/*  dd以下の追記部分は非表示にしておく */
dl.read_more dd.more_content {
	display:none;
}
/* dtにクラスopenが付いた時（dd開き時）「続きを読む」のアイコンと文字色切り替え */
dl.read_more dt.open {
	background-image:url(../img/mark-more-act.gif) ;
	color:#aaa;
}

//JavaScript部
<script src="/paramy/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
//dl.read_more の子要素 dt（続きを読む）をクリックすると次の要素 dd が開閉
//閉じていれば開き、開いていれば閉じる（開閉スピード750のゆっくり目）
		$(this).next().slideToggle(750);
//同時にこの dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
});
</script>

これで「続きを読む」クリックで、追記部分が開閉するようになりました。
しかし、追記部分が長いとまた「続きを読む」まで戻るのも面倒です。
そこで追記の終わりに「追記を閉じる」を追加します。

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>

//JavaScript
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
		$(this).toggleClass("open");
	});
//追加部分
//----------p.close「追記を閉じる」をクリックで、親要素 dd をスピード750で開閉-------
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
	});
//追加部分ここまで	
});

これで、追記部分の下にある「追記を閉じる」クリックで閉じてくれるようになったのですが、問題点が二つ程発生してしまいました。

• 「続きを読む」の文字スタイルが開いた時のままになってしまう。
  これは「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているからか。開閉時にアイコンや文字色を切り替えないようにするか、クラス名を変更する必要がある。
• 「追記を閉じる」クリックで閉じると追記の長さ分スクロールした位置で閉じられてしまう。
  追記文の長さが1000ピクセルあったとすると本来戻りたい「続きを読む」の位置から 1000ピクセル下あたりを表示してしまいます。

追記を閉じる（閉じ位置調整なし）