divがトグルされているときに、すでにトグルされたdivがトグルしています

Question

コードが詰まっています。 アイデアは、1つのdivが非表示のテキストを表示するために切り替えられたときに、別のdivをクリックすると、そのdivは非表示になり、もう一方の表示のみが表示されます。 私は手動で（ボート負荷のコードを使用して）それを行う方法を知っていますが、多分、それぞれの背後に貼り付けることができる "一般的な"行のコードがあるのだろうかと思っていました。ここで

は私のJSです：あなたはそれを1つずつ切り替えます見ることができるように

 $(document).ready(function(){ 
    $('#bioInfo').on('click', function(){ 
    $('#bioInfoText').toggle(); 
    }); 
    $('#bioTech').on('click', function(){ 
    $('#bioInfoText').toggle(); 
    }); 
    $('#bioFuture').on('click', function(){ 
    $('#bioFutureText').toggle(); 
    }); 
    $('#bioCont').on('click', function(){ 
    $('#bioContText').toggle(); 
    }); 
    $('#bioAdd').on('click', function(){ 
    $('#bioAddText').toggle(); 
    }); 
    $('#bioPrac').on('click', function(){ 
    $('#bioPracText').toggle(); 
    }); 
    $('#automInfo').on('click', function(){ 
    $('#automInfoText').toggle(); 
    }); 
    $('#automFuture').on('click', function(){ 
    $('#automFutureText').toggle(); 
    }); 
    $('#autom').on('click', function(){ 
    $('#automInfoText').toggle(); 
    }); 
    $('#automContent').on('click', function(){ 
    $('#automContentText').toggle(); 
    }); 
    $('#automAdd').on('click', function(){ 
    $('#automAddText').toggle(); 
    }); 
    $('#automPrac').on('click', function(){ 
    $('#automPracText').toggle(); 
    }); 
    $('#itInfo').on('click', function(){ 
    $('#itInfoText').toggle(); 
    }); 
    $('#it').on('click', function(){ 
    $('#itInfoText').toggle(); 
    }); 
    $('#itFuture').on('click', function(){ 
    $('#itFutureText').toggle(); 
    }); 
    $('#itCont').on('click', function(){ 
    $('#itContText').toggle(); 
    }); 
    $('#itAdd').on('click', function(){ 
    $('#itAddText').toggle(); 
    }); 
    $('#itPrac').on('click', function(){ 
    $('#itPracText').toggle(); 
    }); 

が、私はその個人をクリックした場合のみ、オフを切り替えます手動で、これが望まれていないDIV。

Answer 1

異なる実装で使用する方がよいでしょう。ここでは、リセット機能を使用してください：

function resetAll() { 
    $('[id$="Text"]').hide(); 
    // Translates to: 
    $("#bioInfoText, #bioInfoText, #bioFutureText, #bioContText, #bioAddText, #bioPracText, #automInfoText, #automFutureText, #automInfoText, #automContentText, #automAddText, #automPracText, #itInfoText, #itInfoText, #itFutureText, #itContText, #itAddText, #itPracText").hide(); 
} 

そして、クリックするたびにresetAll()関数を呼び出します。

Answer 2

私があなただったら、私はあなたが作業したい要素にクラスを追加するだけです。

$('body').on('click', '.someClass', function(){ 
    var id = $(this).attr('id'); 
    $('.someClass').hide(); 
    $('.someClass #' + id + 'Text').show(); // Following your naming convention 
}); 

今、私はあなたのhtmlは、それが100％正しい場合ので、私が言うことはできませんどのように見えるか分からない...しかし、私はあなたのアイデアを得ると思う：次に、あなたはこのような何かを行うことができます。