UNIRRY

WEBデザインとホロスコープと宇宙のブログ

jQueryで開閉式のコンテンツ=見たい人だけ見れればいいをつくる

piyoko

超簡単な、ただの開閉式コンテンツのjQueryについて記載します。このペンギン3兄弟をサムネイルにいれたかったからでは決してありません!

やるのは、けっこうよく使われている、最近だと、企業サイトとかでも、上のほうに矢印だけがぴよっとでていて、なにこれ、なにこの「押したかったら押せば」的な感じ、と思って押すと、全体コンテンツが下に下がってあたかも後ろに隠れていた隠しコンテンツが見えてくる、ってやつです。

jsの流れとしては、①押したら開く、②もう一回押したら閉じる、です。今回はdivの高さを変えることで実現しています。

js

var openflag = false; //フラグを用意

//openbtnを押したときに、offcontの高さを変更する
$("#openbtn").click(function(){
      if ( openflag ==  false ) {
            $("#offcont").animate( { height: 500 + "px" }, 500 );
             openflag = !openflag;
       } else {
            $("#offcont").animate( { height: 0 + "px" }, 500 );
            openflag = !openflag;     
       }
});

html

<div id="openbtn">押してもいいよ</div>
<div id="offcont"></div>

複数個所に開閉が必要だった場合・・・

複数個所に開閉が必要だった場合の記事を追記しました。
http://unirry.com/jquery_open_close_faq-648.html


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3