2015/08/03
JQuery
備忘録です。
クリックで開閉するアコーディオンです。
参考サイト
jQueryによるトグル処理
【jquery】クリックで開閉するアコーディオンメニューいろいろ
html基本(最初は開いた状態)
<p id="button">これは#buttonの内容です。</p> ←ここをクリック <p id="text">これは#textの内容です。</p>
jQuery
$(function(){ $("#button").click(function(){ $("#text").toggle(); }); });
html基本(最初は閉じている状態)
<p class="btn-2">ボタン</p> <p class="open-2">テキストテキスト</p>
jQuery
//高さ指定 $('.open-2').each(function(){ $(this).css("height",$(this).height()+"px"); }); //開閉要素を隠す $('.open-2').hide(); //ボタン要素が押されたら $('.btn-2').click(function () { //現在の状況に合わせて開閉 $('.open-2').slideToggle('slow'); //現在の状況に合わせてクラスをつける $(this).toggleClass('active'); });
コピペしてCSSを調整するだけで使えます。
2023/06/30
神社
御朱印
2023/06/15
Mac
Linux
2023/04/16
時宗
御朱印
2023/04/14
臨済宗
御朱印
2023/04/05
寺院
御朱印