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

  • このエントリーをはてなブックマークに追加

クリック(タップ)で展開するコンテンツ

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

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

実装する方法について

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

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

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

HTMLファイルの書き方例

<dl>
  <dt class=”trigger”>トリガー</dt>
  <dd>展開させるコンテンツ</dd>

  <dt class=”trigger”>トリガー</dt>
  <dd>展開させるコンテンツ</dd>
</dl>

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

JavaScriptの書き方

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

$(function(){
  $(‘.trigger’).click(function(){
    $(this).toggleClass(“active”);
    $(this).next().toggleClass(“active”);
  });
});

.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を書いて実装する

  • このエントリーをはてなブックマークに追加

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301