小粋空間  -  a cheap joke and a play on words site

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

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

１．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]);
}

２．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つ以上のメニューを同時にデフォルト表示することはできないようです。

３．表示メニューのスタイル

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

.accordion_toggle_active {}

４．ページ別に表示するメニューを変更する

例として、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」を参考にしてください。

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

• 
• Tweet