問題 × 解決策

コンテンツ内で一部を隠し、詳細を表示するボタンを自由に設定できるようにする方法

問題

コンテンツ内で一部を隠し、詳細を表示するボタンを自由に設定できるようにしたい。

解決策

専用のクラスを決めておき、そのクラスを設定すると内容が隠れて、「詳細を表示」ボタンが配置されるように設定する。

 

内容を一部隠し、「詳細を表示」ボタンを配置させる。

コンテンツ内で、ある特定の部分を隠し、詳細を表示させるボタンを配置してクリックしたら表示させる場合に、より汎用的に使えるようにする方法をご紹介します。

DEMOはこちら

隠されているブロックです。子要素が存在します。

隠されているブロックです。テキストのみです。

専用のクラスを決めます。

より汎用的に使えるようにするため、専用のクラスを決めます。

  • ここでは便宜上、クラス「more-box」を専用クラスとして設定を行っていきます。
  • 詳細を表示させるボタンは、クラス「more-btn」として設定を行っていきます。

HTMLの構築

ブロックを構築し、クラス「more-box」を設定します。

<div class="more-box">
	<p class="text">隠されているブロックです。子要素が存在します。</p>
</div>
<div class="more-box">
隠されているブロックです。テキストのみです。
</div>
<div class="more-box"></div>

CSSの構築

詳細を表示させるボタンのCSSを構築します。

  • 便宜上、クラス「more-btn」として設定しています。
.more-btn{
	text-align: center;
}
.more-btn a{
	display: inline-block;
	padding: 6px 12px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1pt;
	text-decoration: none;
	background-color: #F15A24;
}

javascript(jQuery)の構築

最後にjavascript (jQuery)の構築を行います。

function more(){
	// 全てのクラス「more-box」それぞれのすぐ後に「詳細を表示」ボタン(クラス「more-btn」)を追加
	$('.more-box').after('<p class="more-btn"><a href="#"><span class="inner">詳細を表示</span></a></p>');
	// クラス「more-btn」を1つずつ処理
	$('.more-btn').each( function(){
		// クラス「more-btn」のオブジェクト情報を格納
		var btns = $(this);
		// 連携しているクラス「more-box」のオブジェクト情報を格納
		var object = $(this).prev('.more-box');
		// クラス「more-box」の空判定用
		var bool_obj = true;
		// もしクラス「more-box」の中に何も情報がない場合
		if( !object.find('*').length && object.text().length == 0 ){
			bool_obj = false;
		}
		// もしクラス「more-box」の中に何も情報がない場合
		if( bool_obj == false ){
			// クラス「more-btn」を非表示にする
			btns.fadeOut(0);
			// 連携しているクラス「more-box」を非表示にする
			object.slideUp();
		}else{
			// 連携しているクラス「more-box」を非表示にする
			object.slideUp();
		}
		// クラス「more-btn」内のaタグのクリック処理
		$(this).find('a').click( function(event) {
			// aタグ本来のリンク機能を無効にする
			event.preventDefault();
			// 連携しているクラス「more-box」の表示、非表示を交互に繰り返させる
			object.slideToggle();
			// 連携しているクラス「more-box」への「hide」クラスの付与、取り外しを交互に繰り返させる
			object.toggleClass('hide');
			// もしクラス「more-btn」に「on」クラスが付与されていた場合
			if( btns.hasClass('on') ){
				// 付与されていた場合
				// 「on」クラスを取り外す
				btns.removeClass('on');
				// テキストを「詳細を表示」に切り替える
				btns.find('.inner').text('詳細を表示');
			}else{
				// 付与されていない場合
				// 「on」クラスを付与する
				btns.addClass('on');
				// テキストを「元に戻す」に切り替える
				btns.find('.inner').text('元に戻す');
			}
		});
	});
}; // more
if($(".more-box").length){
	// クラス「more-box」が存在する場合、一連の処理を実行する
	more();
}
  • 「after()」を用いて、クラス「more-box」のそれぞれのすぐ後にクラス「more-btn」の要素を追加します。
  • もしクラス「more-box」の中身が空の場合は、連携しているクラス「more-btn」を非表示にします。
  • クラス「more-btn」をクリックする度に、連携しているクラス「more-box」が表示、非表示を繰り返します。
  • クラス「more-btn」をクリックする度に、テキスト内容が「詳細を表示」と「元に戻す」の切り替わりを繰り返します。

参考ページ

【after(content) – jQuery 日本語リファレンス】
http://semooh.jp/jquery/api/manipulation/after/content/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

three + 3 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧