複数のdivのスタイルを異なるスタイルで切り替える

Question

異なるカテゴリのコンテンツを表示するために複数のdivの切り替えを作成しました。これは一つの例です：

<div id="left"> 
<h4 class="expanding-header-active" profile='1'><a href="#">+ 1</a></h4> 
<div class="toggle-container" rel="profile_1"> 
    <ul> 
    <li class="expanding-subhead-active" profile='4'><a href="#">A</a></li> 
    </ul> 
    </div> 


<div id="right"> 
<div class="toggle-container" rel="profile_4"> 
<h2>A</h2> 
<p>yada yada yada</p> 
</div> 
</div> 

私は私が何を言っているかのより多くを示しフィドル作成しました：私は、メインのdiv（1、2、3が必要

Fiddle

を（A、B、C、D、E、F）がクリックされたときに開いたままにします。しかし、メインディビジョン（+1、+2、+ 3）のうち1つだけを一度に開くことができます。

フィドルは私が必要とするものに近いものにアップデートされていますが、現在は、現在の構造を犠牲にすることなくAとBが同時に開かれないようにする方法はありますか？

Answer 1

私はあなたの質問を正しく理解していると思いますが、$（ "。toggle-container"）という行をコメントアウトするだけでは、$（this）.next（））hide（300）;

ok、あなたの他のコメントを見ました。私は以下のような機能を変更することで、あなたが必要とするものを達成できると思います。

$(".expanding-subhead-active").on('click', function(e){ 
     e.preventDefault(); 
     //$(".toggle-container").not($(this).next()).hide(300); 
     $('#right .toggle-container').hide(); 
     $("div[rel='profile_" + $(this).attr("profile") + "']").show(300,"linear"); 

Answer 2

これを非表示にしたくない場合は、非表示にするコマンドを削除してください。 は、この行を削除します。

$(".toggle-container").not($(this).next()).hide(300); 

http://jsfiddle.net/A8Ymj/1122/

Answer 3

はそれを手に入れました！みんなありがとうをコンテナ-1を.toggleするために内部の回答のクラスを変更し、

$('.toggle-container-1').hide(); 

$(".expanding-subhead-active").on('click', function(e) { 
$(".toggle-container-1").not($(this).next()).hide(300); 
    $("div[rel='profile_" + $(this).attr("profile") + "']").toggle(300, "linear"); 
}); 

Correct Fiddle

を設定

必要な:)私はこれで新たなんです！