JavaScript表示/非表示

Question

この基本コードを使用してテキストブロックを非表示にし、別のブロックを表示するとうまくいきますが、2回目のクリックでテキストをもう一度閉じるには何が必要ですか？今は他のものが選択されるまで開いていますので、最初または最後の選択の後に常に開いています。 クローズのリンクを追加しましたが、タイトルをクリックしてもう一度閉じることをお勧めします。他の同様の質問は、jQueryを使用するか、リンクが選択された後でリンクを非表示にするようです。

function showhide(id) { 
 
    if (document.getElementById) { 
 
    var divid = document.getElementById(id); 
 
    var divs = document.getElementsByClassName('hide'); 
 
    for (var i = 0; i < divs.length; i++) { 
 
     divs[i].style.display = 'none'; 
 
    } 
 
    divid.style.display = 'block'; 
 
    } 
 
    return false; 
 
}

<a onclick="showhide('toggle1');"> 
 
    <h4>-> Title 1</h4> 
 
</a> 
 
<div class="hide" id="toggle1" style="display:none"> 
 
    Some text here. <a onclick="showhide('verify');">close</a> 
 
</div> 
 

 
<a onclick="showhide('toggle2');"> 
 
    <h4>-> Title 2</h4> 
 
</a> 
 
<div class="hide" id="toggle2" style="display:none"> 
 
    Other text here. <a onclick="showhide('verify');">close</a> 
 
</div>

Answer 1

以下のコードは、クリックされたリンクに関連付けられている要素が既に表示され、そうである場合かどうかを確認します - 他の要素と一緒に沿って非表示にします。いかなるものも必要ありません。閉じるリンク。

また、@ KScandrettが指摘しているように、すべてのブラウザでサポートされているブラウザであれば、ブラウザがdocument.getElementByIdをサポートしているかどうかを確認するのは冗長です。

function showhide(id) { 
 
    var divid = document.getElementById(id); 
 
    var divs = document.getElementsByClassName('hide'); 
 
    var showElement = true; 
 
    if (divid.style.display === 'block') { 
 
     showElement = false; 
 
    } 
 
    for (var i = 0; i < divs.length; i++) { 
 
     divs[i].style.display = 'none'; 
 
    } 
 
    if (showElement) { 
 
     divid.style.display = 'block'; 
 
    } 
 
    return false; 
 
}

<a onclick="showhide('toggle1');"> 
 
    <h4>-> Title 1</h4> 
 
</a> 
 
<div class="hide" id="toggle1" style="display:none"> 
 
    Some text here. 
 
</div> 
 

 
<a onclick="showhide('toggle2');"> 
 
    <h4>-> Title 2</h4> 
 
</a> 
 
<div class="hide" id="toggle2" style="display:none"> 
 
    Other text here. 
 
</div>

Answer 2

function showhide(id) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName('hide'); 

    if (divid.style.display === 'none') { 
     divid.style.display = 'block'; 
    } else{ 
     divid.style.display = 'none'; 
    } 

    for (var i = 0; i < divs.length; i++) { 
     if(divs[i].id !== id) 
      divs[i].style.display = 'none'; 
    } 

    return false; 
} 

Answer 3

このコードは、トグル（コメント鉱山）に対する@abagshawによって提案手法を借りて問題を解決します。私の以前のようなこのソリューションは、各アンカーのクリックイベントをアクションに動的に関連付けます。 JavaScriptライブラリの使用jQueryは、ますます堅牢なコードを書くことを可能にします。

$(document).ready(function() { 
 

 
    function showhide(obj) { 
 
    var showFlag = true; 
 

 
    // first: setup for toggle 
 
    if (obj.css("display") === 'block') { 
 
     showFlag = !showFlag; 
 
    } 
 

 
    // then: hide all divs ... 
 
    $("div").each(function() { 
 
     $(this).hide("slow"); 
 
    }); 
 

 

 
    // ... and show respective div if showFlag is true 
 
    if (showFlag) { 
 
     obj.toggle("slow"); 
 
    } 
 
    } 
 

 
    $(".hold").each(function(dex) { 
 
    $(this).click(function() { 
 
     let e = $(".hide").eq(dex); 
 
     showhide(e); 
 
    }); 
 
    }); 
 
});

div.hide { 
 
    display: none; 
 
} 
 

 
ul { 
 
    font-size: 18pt; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    padding-bottom: 30px; 
 
} 
 

 
li:before { 
 
    content: "->"; 
 
    /* looks like bullets */ 
 
    padding-right: 10px; 
 
    color: green; 
 
    /* Or a color you prefer */ 
 
} 
 

 
a.hold { 
 
    color: #f0c; 
 
    text-decoration: none; 
 
} 
 

 
a.hold:hover { 
 
    text-decoration: overline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a class="hold">Title 1</a> 
 
    <div class="hide" id="toggle1"> 
 
     Some text here. 
 
    </div> 
 
    </li> 
 

 

 
    <li><a class="hold">Title 2</a> 
 
    <div class="hide" id="toggle2"> 
 
     Other text here. 
 
    </div> 
 
    </li> 
 
</ul>