初心者にも分かる！なアコーディオンの作り方クリックで開閉するアコーディオンをjQueryを使って作成する方法と、サンプルプログラムの配布。
[JS]パネルをスムーズなアニメーションで開閉するシンプルなスクリプト
Simple Toggle with CSS & jQuery demo デモではバーをクリックすると、パネルがスムーズに開閉します。 それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。 バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。 HTMLの基本構造 <textarea name="code" class="html" cols="60" rows="5"> <h2 class="trigger"><a href="#">Toggle Header</a></h2> <div class="toggle_container"> <div class="block"> <h3>Content Header</h3> <!--Content--> </div> </div> </textarea>
[JS]ユーザビリティに配慮したアコーディオンを実装するチュートリアル
ユーザビリティに配慮しつつ、jQueryのバグにも対応したシンプルなアコーディオンを実装するチュートリアルをSoh Tanakaから紹介します。 Simple Accordion w/ CSS and jQuery デモページ アコーディオンのロジックは下記の通りです。 最初にデフォルトの設定します。 一番目のアコーディオンを開いて、アクティブな状態にします。 クリックをすると。 クリックされたアコーディオンのアイテムは開くのか閉じるのか判定します。 「hidden」（閉じた状態）のアイテムをクリックすると、 全てのアイテムから「active」を取り去り、閉じます。 クリックされたアイテムは「active」になり、すぐにスライドダウンして開きます。 ロジックのイメージは、下記のようになります。 <textarea name="code" class="html" cols="60" row
Accordion Widget | jQuery UI API Documentation
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures. The panels can be activated programmatically by setting the active option. Keyboard interaction When focus is on a header, the following key commands are available: UP/LEFT: Move focus to the previous
Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ:phpspot開発日誌
NETTUTS - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ 次のようなマークアップでシンプルに実装できる模様。 <div id="test-accordion" class="accordion"> <div class="accordion-toggle">トグル1</div> <div class="accordion-content">コンテンツ1</div> <div class="accordion-toggle">トグル2</div> <div class="accordion-content">コンテンツ2</div> <div class="accordion-tog
[JS]わずか1.3KBの軽量で、快適に動作するアコーディオンのスクリプト | コリス
Leigeberのエントリーから、以前紹介した「軽量でシンプルなアコーディオンのスクリプト」より更に軽量（1.3KB）になったアコーディオンのスクリプトを紹介します。 Animated JavaScript Accordion V2 demo Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。 ※Op9.6.0, Safari3.1.2 for Winで正常に動作しました。 仕様自体に大きな変更はなく、アコーディオンの開閉のタイミングやスピードを調整することができます。 アコーディオンの各項目はdl要素となっており、CSSオフ時やスクリプトオフ時にも情報入手の差し支えないように表示されます。
RedLine Magazine : Spryの開閉パネルの件
Spryの開閉パネルの件 このサイトの最下部で使ってる開閉パネルについてメールを頂いたので、それについて書いてみます。jQuery以外のライブラリに触れるの久しぶりすぎて記憶が飛んでた・・・。 Sakkさんへ。 メールありがとうございました。お返事です(n'∀')η ダウンロードと必要なファイル まず本体をダウンロードします。 Adobe Labs - Spry framework for Ajax このページの「Downloads」んとこのリンクを辿っていくとダウンロードできます。途中Adobe IDが必要になります。IDをまだお持ちでないなら作ってダウンロードしてくださいまし。 うちで使ってるのと同じようにするなら必要なのは上でダウンロードしたものの中の「widgets/collapsiblepanel/SpryCollapsiblePanel.js」と「widgets/collaps
jQueryでアコーディオン作成のチュートリアル:phpspot開発日誌
Photoshop Tutorials - HV-Designs.co.uk jQueryでアコーディオン作成のチュートリアルが公開されています。 HTML+CSSでのスタイリング〜jQueryのコードまで。 ちょっとした入門記事としてよさそうです。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ
簡単なjQueryのアコーディオンサンプル | latup - 熊本でホームページ制作をしている人のメモ
ホームページ制作でタブやアコーディオンなどを設置する事があるのですが、そういうケースではjQueryが便利です。 色々と面白いプラグインが多数ありますが、意外と自分でタブ切替やアコーディオン処理をやろうと思うと難しいみたいで、まず簡単なアコーディオン処理のサンプルを作ってみました。 以下、サンプルの解説。 簡単に説明すると、左のアコーディオンが個別に開閉するパターン（sample_1）で、右のアコーディオンが開いているのは常に１つのパターン（sample_2）です。 全体は実際のサンプルページのHTMLソースを参考して下さい。 肝心のjQueryは以下の記述でGoogleからもらい、jQueryの処理は外部ファイルとしてまとめます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javasc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture
Nullyの日記