クリックで開閉するdiv要素は主にネタバレ防止や縦長のデザインをコンパクトにする場合等に使用されますが、slideToggleと呼ばれるJqueryメソッドを使用することで誰でも簡単に実装することができます。
slideToggleの実装方法
まずHTMLの
～の間に<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
でJqueryを読み込むコードを書き込みます。
これはGoogleのAPIから読み込むコードなので、JQueryをダウンロードする必要はありません。
次に、同様にHTMLの
～の間に
<script type="text/javascript" charset="utf-8">
(function($) {
$(document).ready(function(){
$('.slidebox').click(function(){
$(this).next('.row').stop(true, true).slideToggle();
});
$("div.row").css("display","none");
});
})(jQuery);
</script>
を書き込みます。
これで使用準備完了です。
次にクリックする要素とクリック時に開閉する要素を書き込みます。
<div class="slidebox">クリックする文字列や画像をここに</div> <div class="row"> ここに開閉時に出現する内容を掲載 </div>
これで実装できます。
