ときどきWEBときどきWEB検索2012331『jQueryで簡単アコーディオン作ってやんよ!!』javascriptjqueryTweetPocketスマホサイトなどでよくある開閉式のアコーディオンをjQueryと少しのJavaScript記述で作りたいと思います。</ul></dd></dl>dl要素をアコーディオンの入れ子としアコーディオン全体のボックスを作成。引き出し部分の役割としてdt要素にアコーディオンのタイトルとaccordionクラスを指定し、dd要素にアコーディオン内に入れたい要素を記述。30px;background:#09F;}主にアコーディオン全体の幅、引き出し部の装飾、内部の背景色など。javascriptの記述$(function(){$("dd").after().hide();$("dt.accordion").click(function(){$(this).toggleClass("open").next().slideToggle();});});1accordionの内部(dd)以降の要素を初期設定で隠す。2accordionの引き出し部(dt)をクリックすると起こるアクションを設定。3前者の指定部分をtoggleClassで開く。開く動作はslideToggleを利用。これでタイトル要素をクリックすると開閉するアコーディオンが完成。内容が長くなりすぎてしまうと、ページスクロールで上まで戻ってタイトル部をクリックしないと閉じられないのはよろしくないのでメニュー内部に閉じるアクションを追加します。これで最下部の要素(今回の場合はテキスト)をクリックすることでも閉じる事が可能になった!デモページ2上記のアコーディオンスクリプトを実装したデモページがこちらアコーディオン開閉の初期設定を変更アコーディオンを連続で設置するとデザインによっては開閉アクションの有無がユーザーに伝わりにくいなどの場合があるので、対応として指定の箇所のアコーディオンを初期設定として開いておく記述。.close").click(function(){$(this).parent().slideToggle();});});最初のクラス指定個所に『:not(:first)』と記述。1番目以外は隠す(閉じる)指定。『first』を任意の数に変更したり、『hide』を『show』に変えたりで好きな指定ができます、ハイ。便利だね!jQuery!!スマホUI特化型機能拡張(追記)メニュー項目やメニュー内容がやたらと多い場合はスマホなどウィンドウ領域が狭いデバイスで閲覧された際にアコーディオン開閉の度に焦点となる部分までスクロールする手間が出てきます。そこで、現在開いているメニュー以外は閉じて、開いたメニュー項目までページを自動でスクロールする機能を追加させます。});});スクリプトの解説1複数のメニューでそれぞれの開閉の状態を監視する場合は、開いているメニューに目印となるフラグ(flagクラス)を付けます2クリックされたメニュートリガーがそのフラグとなるflagクラスの付いたトリガーかどうかをhasClassメソッドで条件確認し、flagクラスの付いたメニューはslideDownメソッドで開き、それ以外のメニューはslideUpメソッドで閉じさせる※従来のslideToggleメソッドは要素の状態を切り替えるためのメソッドなので、確実に開かせる場合はslideDown、閉じる場合はslideUPで処理に切り替えた方が意図しない挙動がなくなるかと思います。