「jQuery」と「jQuery UI」で HTML に彩りを添えよう…第３回「Accordion」コンテンツをクリックで垂直に開閉

概要

「Accordion」公式ページ
jQuery UI Documentation / API / 1.8 / Accordion  

「Accordion」についての「Demos & Documentation」
jQuery UI Demos & Documentation / Accordion  

依存関係は…「UI Core」と「UI Widget」が必須です…

デフォルト以外のアニメーションを使いたい場合は…

別途…「UI Effects Core」が必要ですが…

私は…デフォルトのまま使っていますので解説無しです…

さて…

上記公式サイトで…

デフォルトサンプルを触ってみて下さい…

個々人で受け取り方は様々でしょうが…

私が気に入らなかったのは以下の点です…

1. 「id」でのマークアップでは同一ページに複数設置できない…
2. アクティブ時とデフォルト時のアイコンに違和感…
3. 各コンテンツの最大量に合わせて高さが設定されるので無駄なスペースが…
4. 全てのコンテンツを閉じた状態にできない…
5. １番目のコンテンツがアクティブで読み込まれる…
6. ヘッダーが「h3」…

①について

現実に…

同一ページに複数個設置していますので…

「class」でのマークアップにしています(.accordion)…

②について

アクティブ時(コンテンツが開いた状態)には…

「ui-icon-triangle-1-s」(南向き三角形)が設定されていますが…

これを…「ui-icon-triangle-1-n」(北向き三角形)に…

デフォルト時(コンテンツが閉じた状態)には…

「ui-icon-triangle-1-e」(東向き三角形)が設定されていますが…

これを…「ui-icon-triangle-1-s」(南向き三角形)に…

…が…私的に…しっくりくるので…変更しています…

下記「アコーディオン用カスタムコード」の２列目か該当箇所です…

③④⑤について

アコーディオンの領域を固定した方が…

アコーディオンらしく見えるんでしょうが…

どうにも我慢ならないので…

コンテンツの長さに合わせて…

「高さ」を自動調整するようにして(autoHeight:false)…

アクティブなヘッダーのクリックで…

コンテンツを閉じられるようにし(collapsible:true)…

読み込み時にアクティブにするコンテンツを…

HTML で「current」というクラス名を指定する事により…

自由に選択できるように変更しています(active:".current")…

⑥について

Blogger の記事タイトルが…

「h3」なので…ってな単純な理由で変えています(header:"h6")…

「カスタムコード」と「CSS」

でわ…カスタムコードから…

アコーディオン用カスタムコード

$(".accordion").accordion({active:".current",autoHeight:false,collapsible:true,header:"h6"});
$(".accordion").accordion({icons:{"header":"ui-icon-triangle-1-s","headerSelected":"ui-icon-triangle-1-n"}});

続いて…CSS です…ご自由に弄って下さい…

アコーディオン用 CSS

.accordion h6{margin:0;padding:0;line-height:1.2;font-size:13px;font-weight:normal;font-style:italic}
.accordion .buttons{font-size:10px;font-style:italic;overflow:hidden}

HTML マークアップ

それでは…サンプルを作ってみましょう…

ページャーから…

過去記事も合わせてお読み下さい…

クラス名「current」を指定

クラス名「current」を「h6」に指定していますので…
読み込み時にこのコンテンツが開いた状態で表示されます…
開いた状態で表示 させたいコンテンツの「h6」に…
適宜クラス名「current」を指定して下さい…
どの「h6」にもクラス名「current」を指定しない場合は…
全てのコンテンツが閉じた状態で表示されます…
スタイル属性は指定していませんので…
「Accordion」のデフォルトのテキスト設定が反映されます…
「Enter」で改行して記述していますが…
例えば…Blogger の「HTML/JavaScript」ガジェットなどでは…
改行タグ「<br />」を使わない改行は無視されますので…
１行で表示されます…
ご自身のサイトの改行設定によって…
適宜…改行タグ「<br />」を使用して下さい…

クラス名「buttons」を指定…個別にスタイルを指定するには…

第２回「Button」リンクとフォームをボタン化…で設定した…
クラス名「buttons」を指定していますので…
クラス名「buttons」のテキスト設定が反映されます…
コンテンツ毎にスタイル属性を指定したい場合は…
「div」タグに「style="ここに CSS を記述"」ってな感じで記述して下さい…

クラス名「buttons」を指定してリンクをボタン化

第２回「Button」リンクとフォームをボタン化…で設定した…
クラス名「buttons」を指定していますので…
リンクタグを記述するとボタン化されます…
jQuery
jQuery UI

上記アコーディオンのマークアップです…

上記アコーディオンのコード

<div class="accordion">
<div>
<h6 class="current">
<a href="#">クラス名「current」を指定</a></h6>
<div>
クラス名「current」を「h6」に指定していますので…
読み込み時にこのコンテンツが開いた状態で表示されます…
開いた状態で表示 させたいコンテンツの「h6」に…
適宜クラス名「current」を指定して下さい…
どの「h6」にもクラス名「current」を指定しない場合は…
全てのコンテンツが閉じた状態で表示されます…
スタイル属性は指定していませんので…
「Accordion」のデフォルトのテキスト設定が反映されます…
「Enter」で改行して記述していますが…
例えば…Blogger の「HTML/JavaScript」ガジェットなどでは…
改行タグ「<br />」を使わない改行は無視されますので…
１行で表示されます…
ご自身のサイトの改行設定によって…
適宜…改行タグ「<br />」を使用して下さい…
</div>
</div>
<div>
<h6>
<a href="#">クラス名「buttons」を指定…個別にスタイルを指定するには…</a></h6>
<div class="buttons">
第２回「Button」リンクとフォームをボタン化…で設定した…
クラス名「buttons」を指定していますので…
クラス名「buttons」のテキスト設定が反映されます…
コンテンツ毎にスタイル属性を指定したい場合は…
「div」タグに「style="ここに CSS を記述"」ってな感じで記述して下さい…
</div>
</div>
<div>
<h6>
<a href="#">クラス名「buttons」を指定してリンクをボタン化</a></h6>
<div class="buttons">
第２回「Button」リンクとフォームをボタン化…で設定した…
クラス名「buttons」を指定していますので…
リンクタグを記述するとボタン化されます…
<a class="exit" href="//jquery.com/">jQuery</a>
<a class="exit" href="//jqueryui.com/">jQuery UI</a>
</div>
</div>
</div>

「div」タグは…

こんな感じの入れ子構造になっています…

ご自身でアコーディオンの…

コンテンツを増減する際…

解っていても…うっかりさん…

…に…なりがちですので…お間違えなきよう…

おわりに…

以上ですが…過去記事の…

 Bloggerの埋め込みコメントフォームを折りたたんでクリックで開閉する記述

 Bloggerでコメントを折りたたんでクリックで開閉表示…コメントの文字色と文字サイズも変更

…は…JavaScript をあまり使いたくない方向けに書いていますので…

少量＆シンプルな JavaScript で開閉できるようにしていますが…

実装では…この記事のアコーディオンで開閉させています…

他の…実装箇所は…サイトマップの…

Site Map / style-Accordion 2-Rows  

…と…トップページと…記事下部の固定コンテンツです…

次回は…「Tabs」を解説の予定です…

お疲れ様でした…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery / Extra JavaScript Current-Label : jQuery