Jquery toggle 汎用スクリプト

Jquerytoggle

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属性を変更するだけで複数の要素に利用できます。

Jquerytoggle