title: Jquery hide and show css class but only content inside current div, not any other
body: <p>I have loop in wordpress that generates a div with two divs inside and a hide and a show element like below -</p>
  
  <pre><code>&lt;div class="vacancy-desc"&gt;
   &lt;div class="short-desc"&gt;
     Content
   &lt;/div&gt;                 
   &lt;div class="full-desc"&gt;
     Content               
   &lt;/div&gt;       
   &lt;a href="#" class="link show"&gt;MORE &lt;span class="fa fa-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
   &lt;a href="#" class="link hide"&gt;&lt;span class="fa fa-chevron-right"&gt;&lt;/span&gt; LESS&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because this is in the loop there may be several of these exact boxes on the same page.</p>
  
  <p>I want to be able to click on the .show link to expand the .full-desc (which is hidden via css) and the .show to disappear, and the .hide to appear (which is also hidden by css). Then I want the opposite where I can click .hide it will toggle .full-desc shut, disappear and unhide .show.</p>
  
  <p>I can get all this to happen but it targets every .hide .show on the page. What am I missing that allows me to create this script but only target the classes within its parent div?</p>
  
  <pre><code>&lt;script&gt;
  $('.vacancy-desc a.show').click(function(event){
    event.preventDefault();
    $(this).prev().slideToggle('slow');
    $(this).hide();
  });
  
  $('.vacancy-desc a.hide').click(function(event){
    event.preventDefault();
    $(this).prev().slideToggle('slow');
    $(this).hide();
  });
  &lt;/script&gt;
  </code></pre>