Toggle set of images with btn-group
<p>I don't want to display all of the images at once, because it just jumbles the page design. I would like to click a button in a bootstrap btn-group and the appropriate image shows up. Not a javascript/ jquery guy so I need a little help.</p>

<pre><code>  &lt;div class="btn-group" role="group" aria-label="..."&gt;
    &lt;button type="button" class="btn btn-default"&gt;Front&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Back&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
  &lt;/div&gt;

  &lt;div class="front-product-img"&gt;
    &lt;% front = @product['colors'][0]['images'].find{|img| img['label'] == 'Front'} %&gt;
    &lt;%= image_tag front['url'], class: 'img-responsive' if front.present? %&gt;
  &lt;/div&gt;

  &lt;div class="back-product-img"&gt;
    &lt;% back = @product['colors'][0]['images'].find{|img| img['label'] == 'Back'} %&gt;
    &lt;%= image_tag back['url'], class: 'img-responsive' if back.present? %&gt;
  &lt;/div&gt;

  &lt;div class="left-product-img"&gt;
    &lt;% left = @product['colors'][0]['images'].find{|img| img['label'] == 'Left'} %&gt;
    &lt;%= image_tag left['url'], class: 'img-responsive' if left.present? %&gt;
  &lt;/div&gt;

  &lt;div class="right-product-img"&gt;
    &lt;% right = @product['colors'][0]['images'].find{|img| img['label'] == 'Right'} %&gt;
    &lt;%= image_tag right['url'], class: 'img-responsive' if right.present? %&gt;
  &lt;/div&gt;
</code></pre>