クリックで展開するコンテンツを作ろう

クリック（タップ）で展開するコンテンツ

ページメニューなどが時々クリックすると中身が展開するコンテンツがありますよね。
スマートフォンページのページメニューはほぼその形です。
少ない表示エリアでも一部を隠しておくことで広く使えるので便利です。
特にスマートフォンの場合、横幅も高さも手のひらサイズです。最近はなんだか肥大化している傾向にありますが・・・

そんな狭い領域にページメニューがギッシリと埋め尽くされていたら、肝心のページコンテンツが見えません・・・
そういった現象を回避するためにとても便利な方法です。

実装する方法について

JavaScriptを使ってclass名を付け外しする

実際に実装するにはどうするのか・・・
パッケージ化されているjQueryを使う方法もありますが、JavaScriptを書いて、classを付与して実現させる方法を紹介します。

class名がない場合は非表示となるようにCSSを書いて、class名を付けた時に表示となるCSSを書きます。
このCSSを切り替えて、ページに出したり消したりします。

HTMLファイルの書き方例

これを展開させるには「.click(function(){});」を活用します。
ちなみにこれにはjQueryが必須なので忘れないで設置してください。

JavaScriptの書き方

JavaScriptはこんな感じに書きます。

.triggerの付いた要素がクリック（タップ）されたら.triggerの付いた要素と、その次の要素へ.activeを付与させます。
class名が当たれば、CSSを使ってなんでもできちゃいますね。
好きな様に指定を与えてみてください。

それでは先ほどのJavaScriptを解説しましょうか。
「$(‘トリガーとなる要素’).click(function(){});」この部分でトリガーとなる要素はどれなのかを指定します。
例ではclass名が当たっていますが、id名でも問題ありません。タグを指定しても大丈夫です。

続いて入力されている「$(this).toggleClass(“active”);」と「$(this).next().toggleClass(“active”);」でclass名activeを付けたり外したりしています。
付与するclass名は任意で指定する事ができます。
また、付けたり外したりする指定は「toggleClass()」で行います。
これは、classがあれば外し、classがなければ付与するという動作になります。
付けるだけなら「addClass(class)」で、外すだけなら「removeClass()」で実現できます。

まとめ

・予めコンテンツを隠しておけるので、場所を取らない
・主にスマートフォンサイトでは利用シーンが多い
・JavaScriptを使って、class名の付け外しを行う
・実際の表示非表示はCSSを書いて実装する