jQuery click toggle

Question

I'm trying to get my head around this but I can't seem to. Basically, I am trying to create a list where #one will be shown and #two will be hidden, when #one is hovered over then #two will slide down and if you click on it then it will be selected and #one will be hidden and vice versa...Can you help me please?

<div class="sort">
 <div id="one"></div>
 <div id="two"></div>
</div>

$('.sort #one').click(function(){
  $('.sort #one').toggle(function(){
    $(this).animate({ top: '30px' }, 100, "linear");
  });
});

Answer 1

Try this:

$(function() {

    // #one will be shown and #two will be hidden
    $('#one').show();
    $('#two').hide();

    // when #one is hovered over then #two will slide down 
    // if you click on it then it will be selected and #one will be hidden
    $('#one').hover(
    function() {
        $('#two').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }, function() {
        $('#two').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }).click(function() {
        $('#one').hide();
        $('#two').toggle();
    });

    // and vice versa...
    $('#two').hover(
    function() {
        $('#one').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }, function() {
        $('#one').toggle(function() {
            $(this).animate({top: '30px'}, 100, "linear");
        })
    }).click(function() {
        $('#two').hide();
        $('#one').toggle();
    });
});​

Answer 2

Try it...

<script type="text/javascript">
      var check = false;
         $(document).ready(function () {
            $('.sort #one').mouseenter(function () {
                $('.sort #two').toggle(function () {
                    $(this).animate({ top: '30px' }, 100, "linear");
                });
            });

        $('.sort #two').mouseenter(function () {
            check = true;
            $(this).click(function () {
                $('.sort #one').toggle(function () {
                    $(this).animate({ top: '30px' }, 100, "linear");
                });
            });
        });

        if (check != false) {

            $('.sort #one').mouseleave(function () {
                $('.sort #two').toggle(function () {
                    $(this).animate({ top: '30px' }, 100, "linear");
                });
            });
        }
    });

</script>