title: How to set click event to all the anchor tags and display the related div with less script?
body: <p>I have more than 4 anchor tags. </p>
  
  <p>For example:</p>
  
  <pre><code>&lt;div&gt;
      &lt;a href="javascript:void(0);" class="open_popup"&gt;Click me 1&lt;/a&gt;
      &lt;a href="javascript:void(0);"&gt;Click me 2&lt;/a&gt;
      &lt;a href="javascript:void(0);"&gt;Click me 3&lt;/a&gt;
      &lt;a href="javascript:void(0);"&gt;Click me 4&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Each anchor tags have a click event and that will display the related div image.</p>
  
  <pre><code>&lt;div class="click_content_1"&gt;
      &lt;img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"&gt;
  &lt;/div&gt;
  
  &lt;div class="click_content_2"&gt;
      &lt;img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"&gt;
  &lt;/div&gt;
  
  
  &lt;div class="click_content_3"&gt;
      &lt;img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"&gt;
  &lt;/div&gt;
  
  
  &lt;div class="click_content_4"&gt;
      &lt;img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On the page load, I am hiding the div</p>
  
  <pre><code>  $(document).ready(function(){   
  $(".click_content_1,.click_content_2,.click_content_3,.click_content_4").hide(); 
            $(".open_popup").click(function(){
              $(".click_content_1").show();
               });
          });
  </code></pre>
  
  <p>Now When User click on "Click me 1" then It will display the image.</p>
  
  <p>Now my issue is, How to set click event to all the anchor tags and display the related div with less script? but hide the previous one.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".click_content_1,.click_content_2,.click_content_3,.click_content_4").hide();
    $(".open_popup").click(function() {
      $(".click_content_1").show();
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;a href="javascript:void(0);" class="open_popup"&gt;Click me 1&lt;/a&gt;
    &lt;a href="javascript:void(0);"&gt;Click me 2&lt;/a&gt;
    &lt;a href="javascript:void(0);"&gt;Click me 3&lt;/a&gt;
    &lt;a href="javascript:void(0);"&gt;Click me 4&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="click_content_1"&gt;
    &lt;img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"&gt;
  &lt;/div&gt;
  
  &lt;div class="click_content_2"&gt;
    &lt;img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"&gt;
  &lt;/div&gt;
  
  
  &lt;div class="click_content_3"&gt;
    &lt;img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"&gt;
  &lt;/div&gt;
  
  
  &lt;div class="click_content_4"&gt;
    &lt;img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"&gt;
  &lt;/div&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>