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

2013年5月22日

量多めのQ&AページでJqueryのアコーディオン仕様を実装してみました。
前から目を付けていたのですが、ちゃんと実装したのは今回初めてかも。
実装自体は割と簡単なのですが、クリックしたら開くよ！と自然にわかるデザインにする方がメインな作業ですな。

仕様はこちらのページを参考にしました。JSの細かい説明と色々なバージョンも載せてくれてるとこがありがたい。

jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture

jQueryでの開閉式のアコーディンの動きいろいろのデモページ｜CSS Lecture

［JS］タブ式メニューとアコーディオンをつかったサンプル | CSS Lecture

［JS］タブ式メニューとアコーディオンをつかったサンプルのデモページ｜CSS Lecture

スクリプト部分

faqというスラッグを付けた固定ページという設定で条件分岐で挟んであります。

<?php if(is_page(faq)): ?>
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
    $('.accordion_head').click(function() {
        $(this).next().slideToggle();
    }).next().hide();
});
&lt;/script&gt;
<?php endif; ?>

slideToggle()の中に’slow’（遅い）、’nomal’（普通（指定なしと同じ））、’fast’（早い）を入れるとスライドスピードも変えられます。

今回はごくシンプルにこんな感じで。
lightshot

開いた状態。
lightshot

<p>※クリックして回答をご覧下さい。</p>
<div class="ac">
<h4 class="accordion_head">ここに質問が入ります。</h4>
<p>ここに解答が入ります。</p>

この場合pの中身に新たなタグは入れられないです。

CSS記述

div class=”ac”で囲っちゃって、pに一気にスタイル付けをしています。

div.entry h4.accordion_head {
	cursor:pointer;
	background-image:url(images/custom/md_h4_ac.png);
	background-repeat:no-repeat;
	color:#066;
	padding-left:40px;
	border:none;
	margin-bottom: 5px;
	}	
	
div.ac p {
	background:url(images/custom/back_p_ac.png);
	background-repeat:no-repeat;
	padding-left:40px;
	font-size:14px;
	min-height:30px;
	margin-bottom:30px;
	}

以下のページがデザイン的には参考になりました。
Javascriptによるアコーディオンのサンプルサイト5つ | Webデザインのレシピ

CSS3とhtml5仕様

今後の参考にCSS3とhtml5仕様のものです。



デザインも美しい、アニメーションで開閉するアコーディオンを実装するチュートリアル | コリス


カッコよくデザインされたピュアCSS3なアコーディオン実装デモ:phpspot開発日誌


おまけ：内容divバージョンのcss（20121101追記）


スライドで開く内容が多めのバージョン。div.conventionとしました。


div.entry div.ac h2.accordion_head {
	background-image:url(images/custom/ac_h2_back.gif);
	cursor:pointer;
	color:#036;
	border:none;
	margin-bottom: 5px;
	padding-left:30px;
    }
	
div.entry div.ac h2.accordion_head:hover {
	background-image:url(images/custom/ac_h2_back_on.gif);
	cursor:pointer;
    }
     
div.ac div.convention {
    margin-bottom:30px;
    }







				








javascriptJS覚書
Posted by ponnao