title: How to hide and show div onclick of link
body: <p>i have a div that is hidden by default when i click on the link then the div is shown. for e.g</p>
  
  <pre><code>&lt;a href="#expe1" class="fa fa fa-times closer" &gt;&lt;/a&gt; //this is the link
  &lt;div class="resume" id="expe1"&gt;&lt;/div&gt; // this div is hidden by default
  </code></pre>
  
  <p>here is the jquery part</p>
  
  <pre><code>jQuery(document).ready(function($) {
  $('a[href^="#"]').on('click', function(event) {
  
      var target = $( $(this).attr('href') );
  
      target.show();
      if( target.length ) {
          event.preventDefault();
          $('html, body').animate({
              scrollTop: target.offset().top
          }, 2000);
      }
  
  });
  });
  </code></pre>
  
  <p>Now i want to hide that div which i showed 
  So i created another link in front of that div</p>
  
  <pre><code>&lt;div class="resume" id="expe1"&gt;&lt;/div&gt;&lt;a href="#expe1"&gt;x&lt;/a&gt;
  </code></pre>
  
  <p>and here is jquery code</p>
  
  <pre><code>jQuery(document).ready(function($) {
  $('a[href^="#"]').on('click', function(event) {
  
      var target = $( $(this).attr('href') );
      target.hide();
      });
  });
  </code></pre>
  
  <p>but this doesn't works as first jquery shown above is processed first then the last one.. is there any better way to hide that div becuase i have many div like this</p>