リンクを含む複数のDivを表示/非表示

Question

私は何をしようとしているのか明確に説明していませんでした。うまくいけば、これはより良いでしょう。

現在、私はthis Fiddleを使用していくつかのdivを切り替えています。アコーディオンとして機能し、一度に1つのdivのみを表示します。タイトルの1つをクリックするとそのdivの内容が表示され、別のタイトルをクリックすると最初のdivが非表示になり、そのタイトルが表示されます。

1つのdivを開くときに問題が起きました（そしてやりたいことは）最初のdivが閉じられるまで他のdivへのアクセスを非表示にしたいと思います。

「コンテンツ2」をクリックしてそのコンテンツを表示すると、コンテンツ2が再び閉じるまでコンテンツ1、コンテンツ3、およびコンテンツ4へのアクセスを非表示にしたいとします。

function ReverseDisplay(d) { 
 
    var els = document.querySelectorAll('.toggle.active:not(#' + d + ')'); 
 
    for (var i = 0; i < els.length; i++) { 
 
    els[i].classList.remove('active'); 
 
    } 
 
    document.getElementById(d).classList.toggle('active') 
 

 
}

.toggle { 
 
    display: none; 
 
} 
 
.toggle.active { 
 
    display: block; 
 
}

<a href="javascript:ReverseDisplay('content1')"> 
 
\t Content1 
 
</a> 
 
<a href="javascript:ReverseDisplay('content2')"> 
 
\t Content2 
 
</a> 
 
<a href="javascript:ReverseDisplay('content3')"> 
 
\t Content3 
 
</a> 
 
<a href="javascript:ReverseDisplay('content4')"> 
 
\t Content4 
 
</a> 
 

 
<div id="content1" class="toggle"> 
 
    <p>Content 1 goes here.</p> 
 
</div> 
 
<div id="content2" class="toggle"> 
 
    <p>Content 2 goes here.</p> 
 
</div> 
 
<div id="content3" class="toggle"> 
 
    <p>Content 3 goes here.</p> 
 
</div> 
 
<div id="content4" class="toggle"> 
 
    <p>Content 4 goes here.</p> 
 
</div>

Answer 1

これは動作するはずです...要素を特定し、activeが存在するかどうかをチェックすることにより、クラスを追加するために渡されたidを使用してください。

function ReverseDisplay(d) { 
 
    var id = d 
 
    var el = document.getElementById(id) 
 
    var elClassList = el.classList 
 
    var [...active] = document.querySelectorAll('.toggle.active') 
 
    debugger 
 
    if (active.length === 0) { 
 
    el.classList.add('active') 
 
    } else if (id === active[0].id) { 
 
    el.classList.remove('active') 
 
    } 
 
}

.toggle { 
 
    display: none; 
 
    margin-top: 40px; 
 
} 
 
.toggle.active { 
 
    display: block; 
 
} 
 
a { 
 
    position: fixed; 
 
    top: 10px; 
 
}

<a href="javascript:ReverseDisplay('uniquename')"> 
 
    Click to show/hide. 
 
</a> 
 
<div id="uniquename" class="toggle"> 
 
    <p>Content 1 goes here.</p> 
 
</div> 
 

 
<a href="javascript:ReverseDisplay('uniquename1')" style="left:150px"> 
 
    Click to show/hide. 
 
</a> 
 
<div id="uniquename1" class="toggle"> 
 
    <p>Content 2 goes here.</p> 
 
</div>

Answer 2

あなたがしたいかもしれないほど多くのリンクのために、アコーディオンスタイル動作を実現するために、このjavascript関数を使用してください。

function ReverseDisplay(d) { 
    var els = document.getElementById(d); 
    if (els.classList.contains('active')){ 
    els.classList.remove('active'); 
    }else{ 
    var activeDivs = document.getElementsByClassName('active'); 
    for (var i = 0; i < activeDivs.length; i++) { 
     activeDivs[i].classList.remove('active'); 
     } 
    els.classList.add('active'); 
    } 
}