title: Issue with toggling between 3 different height
body: <p>I have a div with a button "Show more". When clicking on the Show more button height of the div will change in 3 different states.</p>
  
  <pre><code> &lt;div class="segment-suggetion-content height-small"&gt;
  
  
      &lt;div class="segment-suggetion-show-more"&gt;
         &lt;button type="button" class="btn"&gt;Show More&lt;/button&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Initially I have class .height-small with height:200px; When I will click on the button "show more" .height-small will removed and .height-mid will add which have height:400px; 
  Again 
  If I click on the 'show-more' .height-mid will remove and .height-full will added. And Again clicking on 'show more", the .height-full will change to .height-small.</p>
  
  <p>I am not good at jQuery yet but I tried with this which is not working. I am not sure what is going wrong here.</p>
  
  <pre><code>   $('.segment-suggetion-show-more .btn').click(function(){
  
      if($(".segment-suggetion-content").hasClass('height-small'))
  {
      $(".segment-suggetion-content").removeClass('height-small');
      $(".segment-suggetion-content").addClass('height-md');
  }
  
       if($(".segment-suggetion-content").hasClass('height-md'))
  {
  $(".segment-suggetion-content").removeClass('height-md');
  $(".segment-suggetion-content").addClass('height-full');
  }
  
       if($(".segment-suggetion-content").hasClass('height-full'))
  {
  $(".segment-suggetion-content").removeClass('height-full');
  $(".segment-suggetion-content").addClass('height-small');
  
  }
  });
  </code></pre>
  
  <p>Any help will be appreciated. </p>
  
  <p><strong><a href="http://jsfiddle.net/3w5t2kp5/1/" rel="nofollow">FIDDLE</a></strong></p>