コピペで簡単に設置できて、かつ軽量な『トグル開閉ボタン』をご紹介します。
サンプル
ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。
ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。
ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。
ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。
ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。
実装方法
まずjQeryを<head>内で読み込みます。
1 | <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> |
続いて以下を同じく<head>内に記述。外部JSにしてもらってもOKです。
1 2 3 4 5 6 7 8 9 10 11 12 | <script> function() { $(".open").css("display","none"); // クリックしたときの動作 $(".btn_show").click(function(){ // 表示／非表示の切り替え $(this).next("div").slideToggle('fast'); (this).toggleClass('active'); return false; }); }); </script> |
HTML部分
1 2 3 4 5 6 7 | <div class="btn_showWrap"> <div class="btn_show ttl-type5">開閉ボタン</div> <div class="open">ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。 ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。 ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。ここに内容を記述。</div> </div> <!--./btn_showWrap--> |
以上で実装完了です。
こちらはサンプルと同じスタイルシートです。
カスタムしてご利用ください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | .btn_show{ background:none; width:100%; height:50px; margin:0; border:3px solid #f2812a; } .btn_show{ display:block; width:100%; height:100%; padding:10px 0; text-align:center; font-size:1.8rem; text-decoration:none; } .btn_show before{/*閉じている時*/ content:"▼" } .btn_showWrap .active before{/*開いた時*/ content:"▲"; } .btn_show a span{ font-weight:bold; } .btn_showWrap .active{ background-color:#f2812a; } .btn_showWrap .active{ color:#fff; } div.open{ display:none;/*jsの読み込みが遅れ、中身が表示されてしまうのを防止。場合によっては不要*/ background:#ffefe1; padding:10px 20px; } |
