特定のタブをクリックすると、他のタブのコンテンツが非表示になるはずですが、非表示になっていません。これが私が持っているすべてのコードです。
function showStuff(id) {
if (document.getElementById(id).style.display === "block") {
document.getElementById(id).style.display = "none";
} else {
document.getElementById(id).style.display = "block";
}
}
<ul class="side bar tabs">
<li id="tabs1" onclick="showStuff('tabs-1')">City</li>
<li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
<li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>
<div id="tabs-1" style="display : none">
<p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
<p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
<p> sodales.</p>
</div>