jquery - 显示/隐藏元素与jQuery

我有元素（div），
命名：element1，element2，element3
默认情况下：element1可见，element2可见，element3隐藏
这是我使用的代码

<script type="text/javascript">
    $(document).ready(function () {
        $('#element3').hide();
        $('#element1').click(function () {
            $('#element3').toggle(400);
        });
    });
</script>

当我单击element1时，我使用上面的代码使element3可见。
我的问题
当我单击时，如何使element2隐藏并且element 3可见
关于元素1？
在element1中再次单击后，如何恢复为默认值？

最佳答案

测试

$(document).ready(function () {
    $('#element3').hide();
    $('#element1').click(function () {
        $('#element3').toggle(400);
        $('#element2').toggle(400);
    });
});

演示：Fiddle