jQuery动画div向下点击

Question

So I have this HTML

<div id="one">One</div>
<div id="two">Two   <br/> <br/>
   Two
</div>
<div id="three">Three</div>
<div id="four">Four   <br/> <br/>
   Four   <br/> <br/>
   Four
</div>

jQuery:

$(document).ready(function () {
    $("#two").hide();
    $("#four").hide();
    $("#one").click(function () {

        $("#four").slideUp("slow", function () {

        });
        $("#three").slideToggle("slow,", function () {

        });

        $("#two").slideToggle("slow", function () {

        });
    });

    $("#three").click(function () {
        $("#four").slideToggle("slow,", function () {});
    });
});

What I'm trying to do is show div one and three one under another.

When I click div one, I want div two to show (animate), and div three (and div four, if div three is clicked too) to move position under div two (with same animation).

When I click div one again, I want div two to hide (animate) and div three (and div four, if div three clicked) to go back to the position they had before.

http://jsfiddle.net/6ynnR/

Answer 1

It seems like you want something like this: EXAMPLE HERE

Updated jQuery:

$("#two, #four").hide();

$("#one").click(function () {
    $("#two").slideToggle(function () {
        $("#four").slideUp();
    });
});

$("#three").click(function () {
    $("#four").slideToggle(function () {
        $("#two").slideUp()
    });
});

Alternatively, here is another approach: EXAMPLE HERE

Answer 2

Just remove the following code and you're good to go :D

    $("#four").slideUp("slow", function () {

    });
    $("#three").slideToggle("slow,", function () {

    });

Answer 3

I hope this will work for you,

I added conditional statement:

if(($("#two").is(":visible"))&&($("#four").is(":visible"))){

      $("#four").slideToggle("slow,", function () {});
      $("#two").slideToggle("slow,", function () {});

    }

and removed two functions :

$("#four").slideUp("slow", function () {
    });

$("#three").slideToggle("slow,", function () {
    });

http://jsfiddle.net/uY73z/19/