jQueryを使ってコンテンツの詳細画像や文章を表示させる方法です。
ボタンをクリックすることで、コンテンツを表示・非表示にすることができます。

デモページのサンプルコードは以下の通りです。

▼HTML

<div class="box01">
  <p class="box02">「画像を表示」をクリックすると下に画像が表示されます。
   <span class="box03"><b>表示</b></span>
  </p>
  <div class="box04">
   <img src="画像のソース" alt="画像の説明">
   </div>
</div>
<div class="box01">
   <p class="box02">「画像を表示」をクリックすると下に画像が表示されます。
   <span class="box03"><b>表示</b></span>
   </p>
 <div class="box04">
   <p class="box04_p">文章も挿入できます。</p>
   <img src="画像のソース" alt="画像の説明">
 </div>
</div>

▼CSS

.box01 .box04 {
		display: none;
		}
		
.box01.open .box04 {
		display: block;
		}

▼JavaScript

jQuery(function ($) {
			$('.box01 .box02 .box03 b').text('詳細を表示');
			$('.box01').on('click',function(){
				if ( !$(this).hasClass('open') ) {
					$(this).find('.box03').find('b').text('閉じる');
				} else {
					$(this).find('.box03').find('b').text('画像を表示');
				}
				$(this).toggleClass('open');
			});
		
		});

デモページは、こちら