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.

```
 <div class="segment-suggetion-content height-small">

    <div class="segment-suggetion-show-more">
       <button type="button" class="btn">Show More</button>
     </div>
</div>

```

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.

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.

```
   $('.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');

}
});

```

Any help will be appreciated. 

**[FIDDLE](http://jsfiddle.net/3w5t2kp5/1/)**