IT Rescue IT関連Tips情報

jQueryで簡単に表示・非表示を制御する

2012年10月3日javascript

divタグ等ブロック要素を、簡単に表示/非表示できるjQueryのスクリプトです。

jQueryを読み込んだ後、

function slide_onoff(did){
 if($(did).css('display')=='none'){
 $(did).slideDown('fast');
 // fast, normal, slow の順で早い
 }else{
 $(did).slideUp('fast');
 }
}

というJavascriptを記載します。使い方は

<a href="void(0);" onclick="slide_onoff('#hidearea');">詳細表示</a>
<div id="hidearea">詳細表示をクリックすると表示/非表示するエリア</div>

という感じです。トグルで機能するので表示用ボタン、非表示用ボタンを別途用意する必要ありません。
”よく使うJavascript集”にでも入れておくと便利だと思います。


コメントをどうぞ

免責事項

著作権者の文書による承諾を得ずに、本サイトの内容の一部、全部を無断で複写、複製、転載することは、禁じられています。
また、当ウェブサイト に記載された情報の完全性・正確性に対して一切の保証を与えるものではありません。当ウェブサイトに含まれる情報もしくは内容を利用することで直接・間接的に生じた損失に関し一切責任を負わないものとします。