「Accordion」 No.4

JavaScript

jQueryスクリプトが動作するには、index-#.htmlファイルの<head></head>内に以下のHTMLコードを記述し、「jquery-1.4.2.js」ファイルをリンクさせます:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

基本的な値を使用してスクリプト機能を初期化する以下のコードも<head></head>内にを記述します:

<script type="text/javascript">
  $(function(){
    $("#link").click(function(event){
      event.preventDefault();
      $(this).toggleClass("link2");
      $("#dropdown_box").slideToggle();
    });
  });
</script>

上記のブロックではアコーディオンボタンで使用するID「#link」と動作を指定しています。
ボタンがクリックされると、CLASS「link2」が適用され、ID「#dropdown_box」の持つ要素が起動します。

HTML

一般的なHTMLの記述例です:

<div class="header-banner-right"></div>
<a href="#" id="link" class="png"></a>
<div id="dorpdown_box" class="dropdown_box"></div>

header-banner-right:コンテンツを持ったボックスが隠れている(閉じている)時の高さと位置を定義します。
#link:このクラスはbutton要素に使用されます。
#dropdown_box:このIDはコンテンツを持ったボックスに割り当てます。

CSS

style.cssファイルにスクリプトに関連した以下の記述があります。

#link {
    background:url(images/button_go_box.png) no-repeat 0 0;
    display:block;
    height:39px;
    width:39px;
    z-index:180000;
    margin:0 0 0 471px;
    position:absolute;
}

.dropdown_box {
    z-index:1;
}

.dropdown_box {
    zoom:0;
    z-index:1;
}

Comments are closed.