javascript - 複数リスト 表示 非表示

Question

div関連するサムネイルが選択されているときに、大きな画像を表示する方法を探しています。以下は、jquery、javascript、または html5 でやろうとしていることの例です。以下のようなレイアウトに最適な方法は何ですか

<div id="show_area">
 show large non-thumb image here
</div>

<!-- selection list -->

<div id="view1">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view2">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view3">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view4">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view5">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view6">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>