Как сделать чтобы при открытии одного элемента Collapsible закрывался другой?

@Gigioshkin · Регистрация: 21.01.2018

HTML5

<div class="category-first">
    <span class="computer-category collapsible">Computer</span>
    <ul class="computer-elements">
        <li class="list-element"><a href="#">Software</a></li>
        <li class="list-element"><a href="#">Networking</a></li>
        <li class="list-element"><a href="#">Operating Systems</a></li>
    </ul>
</div>

Javascript

var coll = document.getElementsByClassName("collapsible");
var i;
            
for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
             content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        } 
     });
}

@atanov · 18.01.2021, 11:54

Gigioshkin, так?

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <span class="computer-category collapsible">First</span>
        <ul class="computer-elements" style="display: none;">
            <li class="list-element"><a href="#">first</a></li>
            <li class="list-element"><a href="#">first</a></li>
            <li class="list-element"><a href="#">first</a></li>
        </ul>
        <span class="computer-category collapsible">Second</span>
        <ul class="computer-elements" style="display: none;">
            <li class="list-element"><a href="#">second</a></li>
            <li class="list-element"><a href="#">second</a></li>
            <li class="list-element"><a href="#">second</a></li>
        </ul>
        <span class="computer-category collapsible">Third</span>
        <ul class="computer-elements" style="display: none;">
            <li class="list-element"><a href="#">third</a></li>
            <li class="list-element"><a href="#">third</a></li>
            <li class="list-element"><a href="#">third</a></li>
        </ul>
    </body>
</html>
<script src = "299.js"></script>

Javascript

document.addEventListener("DOMContentLoaded", getReady);
function getReady()
{
    document.querySelectorAll('[class="computer-category collapsible"]').forEach((elem)=>
    {
        elem.addEventListener('click', click_span);
    });
}
function click_span()
{
    document.querySelectorAll('.computer-elements').forEach((elem)=>
    {
        elem.style.display = 'none';
    });
    this.nextElementSibling.style.display = 'block';
}

@Gigioshkin · 18.01.2021, 17:30 **[ТС]**

atanov, Спасибо огромное! А можно еще при нажатии на открытый элемент он закрывался?

@atanov · 19.01.2021, 08:12

Gigioshkin, добавьте логику проверки:

Javascript

document.addEventListener("DOMContentLoaded", getReady);
function getReady()
{
    document.querySelectorAll('[class="computer-category collapsible"]').forEach((elem)=>
    {
        elem.addEventListener('click', click_span);
    });
}
function click_span()
{
    if(this.nextElementSibling.style.display == 'block')
    {
        this.nextElementSibling.style.display = 'none';
        return;
    }
    document.querySelectorAll('.computer-elements').forEach((elem)=>
    {
        elem.style.display = 'none';
    });
    this.nextElementSibling.style.display = 'block';
}

@Gigioshkin 0 / 0 / 0 Регистрация: 21.01.2018 Сообщений: 9
	18.01.2021, 17:30 [ТС]	3
	atanov, Спасибо огромное! А можно еще при нажатии на открытый элемент он закрывался? 0

Опции темы

Как сделать чтобы при открытии одного элемента Collapsible закрывался другой?

Решение