FAQや良くある質問とかでタイトルだけをリスト表示し、クリックするとそのタイトルの下に回答などがするっと表示し、他のコンテンツは非表示になるという仕組みをよくアコーディオン表示とか言われたりします。
確かに数が多いものはこのような仕組みは便利だったりしますが、クリックすると表示までは良くても、その表示した上部に開いていたコンテンツが非表示になると、その分位置がズレて見えづらくなったりすることも。
スマホでそれを行うと、液晶が大きくないだけに開いた部分が消えてしまうことも。どうせなら液晶の上部にタイトルを合わせ、その下にコンテンツが表示するという方が見えやすくなると思います。
その仕組みをjQueryで構築することにしました。
【HTML】
<div class="titlebar link01" data-switch="link01">
<h4>タイトル</h4>
<span class="switch"><img src="//画像パス/arror.png" alt="" /></span>
</div>
<div class="list_box link01" data-list="link01">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<div class="titlebar link02" data-switch="link02">
<h4>タイトル</h4>
<span class="switch"><img src="//画像パス/arror.png" alt="" /></span>
</div>
<div class="list_box link02" data-list="link02">
<p>テキストテキストテキストテキストテキストテキスト</p></div>
<div class="titlebar link03" data-switch="link03">
<h4>タイトル</h4>
<span class="switch"><img src="//画像パス/arror.png" alt="" /></span>
</div>
<div class="list_box link03" data-list="link03">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
【jQuery】
<script>
$(function(){
$(".titlebar").on("click", function(){
var btn = $(this); // 上向き矢印マーク
var swt = $(this).data("switch"); // タイトルと関連するボックスのデータ
$(".list_box").each(function(index, element){
if($(element).hasClass(swt)) { // 対象ボックスの場合
if($(element).hasClass("active")) {
$(element).removeClass("active").slideUp("1000"); // 1秒で非表示
$(".switch img", btn).css("rotate", "0deg"); // 矢印マークを上向き
} else {
$(element).addClass("active").slideDown("1000"); // 1秒で表示
$(".switch img", btn).css("rotate", "-180deg"); // 矢印マークを下向き（回転）
var offset = $(btn).offset().top; // タイトルバーの位置
var adjust_h = $("対象要素").height(); // 調整用の高さ
$(window).scrollTop( offset - adjust_h); // 対象ボックスに移動
}
} else { // 対象ボックスでない場合
$(element).removeClass("active").hide();
$(".titlebar."+list+" .switch img").css("rotate", "0deg");
}
});
});
})
</script>
adjust_hは、サイトの上部にメニューバーを固定しているなどの場合、アンカーリンク場所まで移動させると重なって見えづらくなる恐れがあるので、その分上部の要素分ずらすという調整のために用意しています。
activeのクラス付けは、他の装飾に何か必要な場合として用意しています。
画像は上向き、下向きの矢印アイコンなどを用意し、クリックするとrotateで変化させるという仕組みで使用します。