Jquery toggle 汎用スクリプト
WEBページに情報が多い場合レイアウトをすっきりさせるため、必要に応じて閲覧者が表示/非表示を切り替えられるようにしておきたいこともあります。
あまりWEBサイト作成の経験がないため、それぞれの切り替え要素についていちいちJqueryのスクリプトを記載していました。。
そんな必要はないことにようやく気付いたので、今後のコピペ用として記事作成
Jquery Toggle
html
<button class="toggle" name="target">クリック</button>
<div id="target">Toggleの対象要素</div>
※クリックする要素のname属性とtoggleの対象となる用のID属性を同じ名前にする。
Jquery
$(function(){
$('.toggle').click(function(){
var target = '#' + $(this).attr('name'); //クリックした用のName属性を取得して「#」を追加する。
$(target).toggle(); //対象要素をtoggleする。必要に応じてオプションを設定
});
});
これをBody下部に記載しておけば、NameとID属性を変更するだけで複数の要素に利用できます。
ディスカッション
コメント一覧
まだ、コメントがありません