"popover image" - having trouble re-hiding the image after it pops up

Question

Hello I currently have a button_to and an image called basic(1).png I want to make a zoom in type display. When the picture gets clicked the bigger clone will show. This currently works!! However i want to be able to hide the cloned image again when i click on the cloned image.

• How can I hide this second cloned image on click?

<script type="text/javascript">
  $(function() {
    $('#background-image-basic1').hide();
  });
</script>

<div id="basic-1" style="height:100%;width:50%;display:inline-block;float:right;">
  <%= button_to 'javascript:;', :class => "view-popover1", :rel => "popover" do %>

    <%= image_tag("basic(1).png", :alt => "basic(1).png", class: "img-responsive ", style:"border-radius:6px;" ) %>

      <% end %>
</div>


<%= button_to 'javascript:;', :class => 'background-image-basic1', :rel => "popover", :id => "background-image-basic1" do %>
  <%= image_tag("basic(1).png", :alt => "basic(1).png", class:"img-responsive thumbnail-instructions ", style:"border-radius:6px;" ) %>
    <% end %>


      
      <script type="text/javascript">
        $('.view-popover1').click(function() {
            $('#background-image-basic1').show();
          }),
          $('.background-image-basic1').click(function() {
            $('#background-image-basic1').hide();
          });
      </script>

Answer 1

WRONG

<%= button_to %>

RIGHT

<%= link_to %>