jquery - jqueryで要素を表示/非表示にする

Question

私は要素（div）を持っています、

名前：要素1、要素2、要素3

デフォルトでは、要素 1 が表示され、要素 2 が表示され、要素 3 が非表示になっています

これが私が使用するコードです

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

上記のコードを使用して、element1 をクリックしたときに element3 が表示されるようにします。

私の質問

1. 要素1をクリックすると、要素2が非表示になり、要素3が表示されるようにする方法は?

2. element1 をもう一度クリックした後、どうすればデフォルトに戻すことができますか?

Answer 1

試す

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

デモ:フィドル

Answer 2

これを試して

<script>
     $(document).ready(function(){
       $('#element1').click(function(){
         $('#element3').toggle();
         $('#element2').toggle();
       }); 
    });
</script>