单击按钮时如何缩短所有div框？

Question

I have the following code:

JS:

<script type="text/javascript">
    $(document).ready(function(){
        $('[href=#del]').click(function(){
            var myParent = $(this).closest('.box');
            myParent.slideUp(800, function(){
                myParent.remove();
    }); }); });
</script>

CSS:

h1 {
    font-family: Arial;
    font-weight: 300;
    color: #444;
}
a {
    color: #fff;
    font-family: Arial;
    text-decoration:none;
    margin-left: 5px;
}
.box {
    width: 150px;
    height: 300px;
    margin-right: 5px;
}
.box1 {
    background-color: red;
    float: left;
    display: inline-block;
}
.box2 {
    background-color: green;
    float: left;
    display: inline-block;
}
.box3 {
    background-color: blue;
    float: left;
    display: inline-block;
}
.box4 {
    background-color: black;
    float: left;
    display: inline-block;
}
.container {
    width: 660px;
    margin: 50px auto;
}

HTML:

<div class="container">
    <div class="box box1"><a href="#del">Toggle</a></div>
    <div class="box box2"><a href="#del">Toggle</a></div>
    <div class="box box3"><a href="#del">Toggle</a></div>
    <div class="box box4"><a href="#del">Toggle</a></div>
</div>

Question:

How can I use one anchor tag that has Toggle on it and when that is clicked all four boxes will reduce in size from height 300px to 150px? The code i have right now simply deletes it but i need it ot shrink the box to 150px from 300px. and when clicked it again it should return to 300px.

Answer 1

$(document).ready(function () {
    $('[href="#del"]').click(function () {
        var $divs = $(this).closest('.container').find('.box');
        $divs.css({
            'height': '150px'
        });
    });
});

Demo ---> http://jsfiddle.net/jttwB/3/

Demo with animation ---> http://jsfiddle.net/jttwB/2/

Answer 2

I think this animate what you are looking for. This will provide both the ability to toggle a single one or toggle all at the same time. If you only need it one way, you can remove one set of the anchors and the associated jquery. If you "toggleAll" on one that is down, it will make them all up.. and vice versa.

http://jsfiddle.net/pb6fM/7/

    $(document).ready(function () {
        $('[href=#toggleMe]').click(function () {
            var myParent = $(this).closest('.box');
            var h = "150px";
            if(myParent.height() == "150") { h = "300px"; }
            myParent.animate({
                height: h
            }, 800)
        });
        $('[href=#toggleAll]').click(function () {
            var boxes = $('.box');
            var h = "150px";
            if($(this).closest('.box').height() == "150") { h = "300px"; }
            boxes.animate({
                height: h
            }, 800)
        });
    });

Answer 3

Just take out the $(this).closest part and add an .each.

$('.box').each(function (index, box) {
  $(box).slideUp(800, function() {
     $(box).remove();
   });
});

Answer 4

Try this for a nicer effect... http://jsfiddle.net/KsV2L/

$(document).ready(function(){
    $('[href=#del]').click(function(){
        $(this).closest('.box').animate({height:'150px',width:'0'},800,function(){$(this).remove()});
        $(this).closest('.container').find('.box').animate({height:'150px'},800);
}); });