jQueryで簡単に表示・非表示を制御する
2012.10.03
divタグ等ブロック要素を、簡単に表示/非表示できるjQueryのスクリプトです。
jQueryを読み込んだ後、
[sourcecode language="plain"]
function slide_onoff(did){
if($(did).css('display')=='none'){
$(did).slideDown('fast');
// fast, normal, slow の順で早い
}else{
$(did).slideUp('fast');
}
}
[/sourcecode]
というJavascriptを記載します。使い方は
[sourcecode language="plain"]
<a href="void(0);" onclick="slide_onoff('#hidearea');">詳細表示</a>
<div id="hidearea">詳細表示をクリックすると表示/非表示するエリア</div>
[/sourcecode]
という感じです。トグルで機能するので表示用ボタン、非表示用ボタンを別途用意する必要ありません。
”よく使うJavascript集”にでも入れておくと便利だと思います。
カテゴリー:技術情報メモ