title: jQuery on click of button show and hide closest divs
body: <p>Hi I am using masonry with laravel and I am basically loading my blogs into a masonry layout. I have an abstract which i output as well as all the content, the content is hidden by default by css. I have a read more button once clicked adds a class to that div which expands the masonry block. </p>
  
  <p>I also want to hide the abstract within this masonry block but I can't seem to be able to do this successfully, instead I am hiding all the abstracts on the page. I've tried using selectors such as parent and children but I don't think I am quite getting the concept here. Any have any ideas as to how I can hide the class div.abstract and show div.fullstroy when I click div.button #read-more ??</p>
  
  <p>A simple version of my code is below or please view my <a href="http://jsfiddle.net/2n0bunty/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>Any help much appreciated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="masonary-blogs"&gt;
      &lt;div class="one-third column"&gt;
          &lt;h3&gt;title&lt;/h3&gt;
          &lt;div class="abstract"&gt;
              &lt;p&gt;abstract&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fullstory"&gt;
              &lt;p&gt;fullstory&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;a href="#" id="read-more"&gt;Read more&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
         &lt;div class="one-third column"&gt;
          &lt;h3&gt;title&lt;/h3&gt;
          &lt;div class="abstract"&gt;
              &lt;p&gt;abstract&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fullstory"&gt;
              &lt;p&gt;fullstory&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;a href="#" id="read-more"&gt;Read more&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="one-third column"&gt;
          &lt;h3&gt;title&lt;/h3&gt;
          &lt;div class="abstract"&gt;
              &lt;p&gt;abstract&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fullstory"&gt;
              &lt;p&gt;fullstory&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="button"&gt;
              &lt;a href="#" id="read-more"&gt;Read more&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.one-third {
      width:23%;
      background:#dedede;
      min-height:100px;
  
  }
  .column {
      display:inline-block;
      margin-left:5px;
      margin-right:5px;
  }
  .fullstory {
      display:none;
  }
  .gigante {
      width:100%;
  }
  .hide {
      display:none;
  }
  
  .show {
      display:block;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#masonary-blogs').on('click', 'a', function(e){
      var blogItem = $(this).parents('.one-third'),
          container = $('#masonary-blogs');
  
      e.preventDefault();
      console.log('Blog link click');
  
      $('.gigante').removeClass('gigante');
      $(e.target).parents('.one-third').addClass('gigante');
      $('.one-third').children('.abstract').hide();
  
  });
  </code></pre>