Expanding Boxes - tidy up

Question

I am building something that needs expanding boxes - that is fine I have that working. However if you look at this FIDDLE you will see that it is a bit messy. I was hoping that there is a way to expand the boxes where they sit so that they aren't jumping around? So box three would have the left side expand quicker then the right and it looks to be filling the parent container?

$(".grow").click(function(){

var growEl = $(this),
    curHeight = $(this).height(),
    curWidth = $(this).width(),
    curTop = growEl.offset().top,
    newHeight = 200,
    newWidth = 860,
    actHeight = $(this).attr("height"),
    actWidth = 200,
    newMargin = curTop - (newHeight -curHeight)/2;

if(newMargin < 0){
    newMargin = 0;   
}

if (curWidth < 860){

    $('.grow').not(this).hide();
    $(this).animate({/*height:newHeight+"px", */width:newWidth+"px"/*, marginTop:newMargin + 'px'*/}, function() {
        $(this).find('.description2').fadeIn('fast');
    });

} else if (curWidth == 860) {

    $(this).find('.description2').fadeOut('fast');
    $(this).animate({/*height:actHeight+"px", */width:actWidth+"px"/*, marginTop:newMargin + 'px'*/},function() {$('.grow').not(this).show()});
    /*$('.grow').not(this).show();*/

};

})

I hope that makes sense :)

Answer 1

Here is another version I have given using jquery. I have bound the click event and animated the widths accordingly.

the link for the UPDATED fiddle is here.

the code snippet follows:

$(function() {
  var clickCount = 0;
  var icons = $('.social-container > li').on({
    click: function() {
      clickCount++;
      if ((clickCount % 2) > 0) {
        icons.stop().animate({
          'width': '0%'
        }, 400);
        var self = $(this);
        self.stop().animate({
          'width': '100%'
        }, 400);
      } else {
        icons.stop().animate({
          'width': '25%'
        }, 400);
        clickCount = 0;
      };
    }
  });
});

ul.social-container {
  width: 400px;
  height: 69px;
  display: block;
  list-style-type: none;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.social-container > li {
  list-style: none;
  float: left;
  padding: 10px 0px;
  width: 25%;
  text-align: center;
}
ul.social-container li.facebook {
  background: #3b5998;
  left: 0px;
}
ul.social-container li.twitter {
  background: #00aced;
  left: 100px;
}
ul.social-container li.instagram {
  background: #517fa4;
  left: 200px;
}
ul.social-container li.pinterest {
  background: #cb2027;
  left: 300px;
}
ul.social-container li img {
  width: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="background">
  <ul class="social-container">
    <li class="facebook">
      <img src="http://static.tumblr.com/5u1fog0/mAMnbyjiz/facebook.png" alt="" />
    </li>
    <li class="twitter">
      <img src="http://chem.duke.edu/sites/chem.duke.edu/themes/dukechem/images/twitter.png" alt="" />
    </li>
    <li class="instagram">
      <img src="http://thebasementla.com/mobile/images/iconIg.png" alt="" />
    </li>
    <li class="pinterest">
      <img src="http://www.boguewatch.com/images/pinterestIcon.png" alt="" />
    </li>
  </ul>
</div>

UPDATE::

Sorry for the delayed update. OP asked to achieve the expansion and shrinking of the boxes on click. I have updated the code snippet and fiddle to achieve what OP asked. Basically all I did was add a click counter and on even numbered click on the element , the width to be animated is manipulated.

Hope this helps as well. Happy Coding :)

Answer 2

something like this? just show hide with "slow" property. 

https://jsfiddle.net/ugpg3gk3/4/