studio-benkei

快適に動作するアコーディオン「Accordion V2」

Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、
単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。
アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。

JSダウンロードするとimage画像とcssとjsとサンプルhtmlが入っています。
cssはそのまま使えますが、タグの<dd>をCSSで変更すると、
うまく動かないことがあったので、<dd>の中に<span>タグを入れ、そちらにcssを指定すると良いです。

ダウンロードサイト　→　 Accordion V2

快適に動作するアコーディオン

Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、 対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。
アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。

アコーディオンの開閉の

タイミングやスピードを調整することができます。

JSダウンロードすると

image画像とcssとjsとサンプルhtmlが入っています。
cssはそのまま使えますが、タグの<dd>をCSSで変更すると、
うまく動かないことがありました。なので、<dd>の中に<span>タグを入れ、そちらにcssを指定すると良いです。

軽量

このスクリプトは(1.3 KB) ととても軽くできています。

ダウンロード

ダウンロードはこちらのサイトからできます。

デモページ

一応デモページのリンクも張っておきます。

JavaScript ▼

            <script type="text/javascript">
            
            var slider1=new accordion.slider("slider1");
            slider1.init("slider1");
            
            var slider2=new accordion.slider("slider2");
            slider2.init("slider2",0,"open");
            
            </script>
          

HTML ▼

          <dl class="accordion" id="slider1">
            
見出しテキスト
            
テキスト
          </dl>
          <dl class="accordion2" id="slider2">
            
見出しテキスト
            
テキスト
          </dl>