JSでシンプルなアコーディオン

-
JSでシンプルなアコーディオン:

多くのサイトで使われているアコーディオン機能を実装します。

Listでも右上のナビゲーションバーで使ってます。

いろんな項目を一覧にした時なんかに使える、汎用性の高い機能です。

  1. headerにJSタグを記述
  2. htmlに２つのクラスを並列で作る
  3. javascriptを記述

1. headerにJSタグを記述

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head>

2. htmlに２つのクラスを並列で作る

showbox

hidenbox

という２つのクラスを並列で作る。

（名前は何でもおk）

このshowboxをクリックすると、隠れていたhidenboxが表示されるという処理に使う。

<div> 
    <div class="showbox"> 
        click here 
    </div> 
    <div class="hidenbox"> 
        hello 
    </div> 
</div>

3. javascriptを記述

toggle(2000)の数値を変えることで表示までの時間を設定できる。

showには様々なアニメーション効果をつけられる。

<script type="text/javascript"> 
    $('.hidenbox').hide(); 
    $('.showbox').click(function(){ 
        $('.hidenbox').toggle(2000); 
        $('.hidenbox').siblings('.hidenbox').slideUp(); 
    }); 
</script>

コメント

コメントを投稿