横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
アコーディオンのパネル部画像をスライド表示する
動作; アコーディオンパネルの選択部("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> |