[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion
テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど高性能な上、超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ jQuery plugin: Easy Accordion デモページ [ad#ad-2] Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴ったアコーディオンを簡単に実装可能。 自動スライド、手動スライドの切り替えが可能。 同一ページに複数のアコーディオンを配置可能。 初期表示に任意のスライドを指定可能。 画像を使用しないで設置可能。 カスタマイズが容易（高さ・幅・ボーダー・背景画像など） アクセシブルで、SEOにもフレンドリー。 さまざまな
[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」（閉じた状態）のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
縦横にアコーディオンするjQueryアコーディオン「Grid Accordion with jQuery」
多くのコンテンツを少ない面積で見せることができるアコーディオンによる見せ方は様々なWEBのシーンで使われていますが、今回紹介するのは、通常一方向だけではなく、縦と横、両方向に展開ができるjQueryを使ったアコーディオン「Grid Accordion with jQuery」です。 InfoGrid – DEMO 上記のように、多数のカテゴリーでコンテンツが多岐に渡る場合や表組みで、比較したいときなどは非常に便利な機能だと思います。 詳しくは以下 HTML側はdl、dt、ddで構成された非常にシンプルなものになっており、それおをCSSでデザインをし、jQueryで動きを動作するというものになっています。 ソースコード自体は非常にシンプルなものになっていますので、この手のライブラリをつかって何かを組み込んだことがある方なら問題なく実装できるかと思います。ソースファイルをまるごと収録したサンプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
