javascript - Javascript を使用したアニメーション化されたドロップダウン Div パネル

Question

可能な限りの助けを前もって感謝します。

toggleSlider基本的に、ページが最初にロードされたときにパネルが非表示になる関数によってアクティブ化されるドロップダウン div パネルを作成しようとしていました。最初の 2 つのリンク "resume" と "work" は、私が望んでいたように機能します。1 つをクリックすると、対応する div がドロップインし、同じリンクまたは他のリンクの 1 つをもう一度クリックすると、コンテンツが撤回されます。3 番目のリンクは他のリンクとは異なり、クリックすると対応する div が他のコンテンツを覆い隠し、同じリンクを再度クリックすることによってのみ元に戻すことができます。これがその外観です....

http://www.visuallypersuasive.com/jason/test.html#

そして、ここにjavascriptがあります

function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").fadeOut(600, function(){
        $("#panelThatSlides").slideUp();
    });
}
if ($("#panelThatSlides2").is(":visible")) {
    $("#contentThatFades2").fadeOut(600, function(){
        $("#panelThatSlides2").slideUp();
    });
}
else {
    $("#panelThatSlides").slideDown(600, function(){
        $("#contentThatFades").fadeIn();
    });
}   
}

function toggleSlider2() {
if ($("#panelThatSlides2").is(":visible")) {
    $("#contentThatFades2").fadeOut(600, function(){
        $("#panelThatSlides2").slideUp();
    });
}
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").fadeOut(600, function(){
        $("#panelThatSlides").slideUp();
    });
}

else {
    $("#panelThatSlides2").slideDown(600, function(){
        $("#contentThatFades2").fadeIn();
    });
}   
}

function toggleSlider3() {
if ($("#panelThatSlides3").is(":visible")) {
    $("#contentThatFades3").fadeOut(600, function(){
        $("#panelThatSlides3").slideUp();
    });
}
if ($("#panelThatSlides2").is(":visible")) {
    $("#contentThatFades2").fadeOut(600, function(){
        $("#panelThatSlides2").slideUp();
    });
}
if ($("#panelThatSlides").is(":visible")) {
    $("#contentThatFades").fadeOut(600, function(){
        $("#panelThatSlides").slideUp();
    });
}


else {
    $("#panelThatSlides3").slideDown(600, function(){
        $("#contentThatFades3").fadeIn();
    });
}   


}

そして、ここにhtmlがあります

<div id="resume"><a class="nav" href="#" onclick="toggleSlider();">resume</a>
<div id="panelThatSlides" style="position:relative; left:250px; display:none;   
background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none; 
background:#fff; width:950px; height:500px;">content</div>
</div>
</div>

<div id="work"><a class="nav" href="#" onclick="toggleSlider2();">work</a>
<div id="panelThatSlides2" style="position:relative; left:-420px; display:none; 
background:#eee; width:950px; height:500px;">
<div id="contentThatFades2" style="position:relative; left:00px; display:none; 
background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>

<div id="contact"><a class="nav" href="#" onclick="toggleSlider3();">contact</a>
<div id="panelThatSlides3" style="position:relative;left:-550px; display:none;    
background:#eee; width:950px; height:500px;">
<div id="contentThatFades3" style="position:relative; left:00px; display:none; 
background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>

HTML と CSS については基本から中級までしっかりと理解していると思いますが、javascript は私にとってほとんどギリシャ語です。理想的には、この手法を使用して、作業リンク/div 内に別のドロップダウン div をネストし、これを機能させることができれば、3 つ以上のリンクを使用したいと考えています。

助けてくれる人にもう一度感謝します。