Спрячьте два DIVs и переключите третий щелчок, затем нажмите

Question

При щелчке моя функция скрывает первые два DIV s и переключает третий DIV. Это работает. Когда я снова нажимаю на ту же ссылку, функция переключает третий DIV, это также работает. Но два ранее скрытых DIV s теперь остаются скрытыми, пока они должны быть видимыми.

<div> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> -->CSS style is hidden 
</div> 

$(document).ready(function(){ 
    $("#three").hide(); 
    $(".show_hide").show(); --> this shows my click link 

    $('.show_hide').click(function(){ 
     $("#three").slideToggle().load('testpage.php'); 
       $("#one").hide(); 
       $("#two").hide(); 
    }) 
}); 

Answer 1

Изменить это ...

$("#one").hide(); 
$("#two").hide(); 

к этому ...

$("#one").toggle(); 
$("#two").toggle(); 

или это ...

$("#one,#two").toggle(); 

или это .. ,

$(this).siblings().toggle(); 

Answer 2

Вы можете сделать это: JSFiddle

HTML:

<div> 
    <div id="one">hi</div> 
    <div id="two">hello</div> 
    <div id="three">again</div> 
</div> 
<a class="show_hide">Show/Hide</a> 

Javascript:

$(document).ready(function(){ 
    $("#three").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function(){ 
     $("#three").slideToggle().load('testpage.php'); 
       $("#one").slideToggle(); 
       $("#two").slideToggle(); 
    }) 
}); 

Answer 3

$(document).ready(function(){ 

    $("#three").hide().load('testpage.php'); 

    $(".show_hide").show().click(function(){ 
     $("#one").toggle(); 
     $("#two").toggle(); 
     $("#three").slideToggle(); 
    }) 

}); 

Что я сделал:

1) Слияние функций на .show_hide в цепочку.

2) Изменены hide() функции в toggle()

3) переместили свой load() вызов из петли, чтобы предотвратить в связыванию каждый раз.