Accordion で特定のメニューをデフォルト表示する

Accordion で特定のメニューをデフォルト表示する

Posted at August 11,2008 1:55 AM
Tag:[Accordion, JavaScript]

先日紹介した「Accordion によるサイドメニューの折りたたみ」で、特定のメニューを最初から表示させておくためのカスタマイズです。

1.loadAccordions の修正(1ヶ所だけ表示)

Accordion によるサイドメニューの折りたたみ」での loadAccordions の設定は次のようになっています。

function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
}

例えば、左サイドバーの「最近のブログ記事」をデフォルトで表示したい場合、この関数に次の1行を追加します。

function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
    leftAccordion.activate($$('#links-left .accordion_toggle')[0]);
}

leftAccordion は左サイドバー用の変数、#links-left .accordion_toggle は、左サイドバーの id 属性と Accordion に登録しているメニュータイトルの class 属性値、[0] は Accordion に登録しているメニューの順番です(0から開始)。「最近のコメント」を開きたい場合は [1] にします。

右サイドバーの「タグクラウド」を表示させるには次のようにします。

function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
    rightAccordion.activate($$('#links-right .accordion_toggle')[1]);
}

2.loadAccordions の修正(2ヶ所表示)

左サイドバーと右サイドバーのメニューを同時に表示したい場合は次のように2行記述します。

function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
    leftAccordion.activate($$('#links-left .accordion_toggle')[0]);
    rightAccordion.activate($$('#links-right .accordion_toggle')[1]);
}

なお、同じ変数(leftAccordion または rightAccordion)の中で2つ以上のメニューを同時にデフォルト表示することはできないようです。

3.表示メニューのスタイル

表示されているメニューのスタイルは、次のセレクタで制御できます。

.accordion_toggle_active {}

4.ページ別に表示するメニューを変更する

例として、Movable Type の場合であれば、ヘッダーに次のような制御を組み込めば、表示するメニューを変更することができます。

function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
<mt:if name="category_archive">
    leftAccordion.activate($$('#links-left .accordion_toggle')[0]);
</mt:if>
<mt:if name="entry_archive">
    rightAccordion.activate($$('#links-right .accordion_toggle')[1]);
</mt:if>
}

name モディファイアの値は「予約変数一覧 for Movable Type 4.2」を参考にしてください。

この方法を用いれば、制御する変数によって色々な組み合わせが可能です。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)