変数のIDと一致しないクラス内のすべての要素を非表示

Question

私は、Windows 10の[スタート]メニューによく似たタイルを持つサイトを持っています。

一度クリックすると、フルサイズのドロップダウンが必要になります。同じタイルをもう一度クリックするとドロップダウンして閉じる必要があります。別のタイルをクリックするとドロップダウンが必要です。

これらのタイルにはあらゆる種類の名前が付いているので、クリックしたタイルのIDによって指示されるいくつかのjavascriptを作成したいと考えていました。

は、ここで私がこれまで持っているものです。

<div id="gaming" class="box one-one blue" onclick="showSection(this);"> 
<div id="gaming-section" class="section"> 

<div id="marketing" class="box one-one blue" onclick="showSection(this);"> 
<div id="marketing-section" class="section"> 

function showSection(obj) { 
    var tileName =obj.getAttribute('id'); 
    var sectionName =(tileName+'-section'); 
    document.getElementById(sectionName).style.display = "block"; 
} 

すべてのヘルプははるかにこのため

Answer 1

為替document.getElementById(sectionName).style.display = "block";いただければ幸いです。

const elemStyle = document.getElementById(sectionName); 

if (elem.style.display !== 'block') { 
    elem.style.display = 'block'; 
else { 
    const elements = document.getElementsByClassName('section'); 
    elements.forEach(elem => { 
     elem.style.display = 'none'; 
    } 
}