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

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

jQuery

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

 

アコーディオンのパネル部画像をスライド表示する

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

jQueryの書き方 /* ---------------------------------------*
//21-02) 1. アコーディオンパネル選択
* -----------------------------------------*/
$(function(){
  //2-2 パネル選択
  $("dd:not(:first)").css("display","none");
  $("dt").click(function(){
    if($("+dd",this).css("display")=="none"){
      $(this).siblings("dd").slideUp("slow");
      $("+dd",this).slideDown("slow");
    }
  });
});
cssの書き方 .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><img src="1.jpg" alt="1"/></dd>
  <dt>テキスト2</dt>
  <dd><img src="2.jpg" alt="2"/></dd>
  <dt>テキスト3</dt>
  <dd><img src="3.jpg" alt="3"/></dd>
  <dt>テキスト4</dt>
  <dd><img src="4.jpg" alt="4"/></dd>
  <dt>テキスト5</dt>
  <dd><img src="5.jpg" alt="5"/></dd>
</dl>

テキスト1
1
テキスト2
2
テキスト3
3
テキスト4
4
テキスト5
4