株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

21-01)　1. アコーディオンのパネルを選択し、表示する

　

アコーディオンのパネル（文字列）をスライド表示する

 動作；　アコーディオンパネルの選択部（"dt"；薄緑のテキストラベル）を
　　　　　クリック（.click(function()）すると、
　　　　　パネル部（("+dd",this)）の文字列を表示（.slideDown("slow")）する。

jQueryの書き方 /*　---------------------------------------*
//21-01) 1. アコーディオンパネル選択
* -----------------------------------------*/
$(function(){
  //パネル選択処理
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
    if($("+dd",this).css("display")=="none"){
      $(this).siblings("dd").slideUp("slow");
      $("+dd",this).slideDown("slow");
    }
  });
});
ｃｓｓの書き方 /*-----------------------------------------
21-01)　1. パネル選択
------------------------------------------- */
.panl_2101 {
  margin: 10px 0 10px 50px;
  width: 400px;
  background: gray;
  background-color: #D8E2FA;
}
.panl_2101 dt{
  background:#7CADB6;
  border-bottom:1px solid #FFFFFF;
  cursor:pointer;
}
.panl_2101 dd{
  border:1px solid #7CADB6;
  border-top:none;
  height:300px;
  overflow:hidden;
}
.panl_2101 dd p{
  padding: 5px 10px 5px 10px;
}
HTMLの書き方 <dl class="panl_2101">
  <dt>テキスト1</dt>
  <dd><p>テキスト1文字列　・・・</p></dd>
  <dt>テキスト2</dt>
  <dd><p>テキスト2文字列　・・・</p></dd>
  <dt>テキスト3</dt>
  <dd><p>テキスト3文字列　・・・</p></dd>
  <dt>テキスト4</dt>
  <dd><p>テキスト4文字列　・・・</p></dd>
  <dt>テキスト5</dt>
  <dd><p>テキスト5文字列　・・・</p></dd>
</dl>>
テキスト1（選択部）

テキスト1（パネル部）
レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、 リンク バーが入るセルをページの左の辺に沿って、さらにWeb ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで 取ることができます。

テキスト2（選択部）

テキスト2（パネル部）
レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、 リンク バーが入るセルをページの左の辺に沿って、さらにWeb ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで 取ることができます。

テキスト3（選択部）

テキスト3（パネル部）
レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、 リンク バーが入るセルをページの左の辺に沿って、さらにWeb ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで 取ることができます。

テキスト4（選択部）

テキスト4（パネル部）
レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、 リンク バーが入るセルをページの左の辺に沿って、さらにWeb ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで 取ることができます。

テキスト5（選択部）

テキスト5（パネル部）
レイアウト テーブルを描くとき、ヘッダー グラフィックスが入るセルをページの上の辺に沿って、 リンク バーが入るセルをページの左の辺に沿って、さらにWeb ページのメイン コンテンツが入るセルをページの右の辺いっぱいまで 取ることができます。