How to change style on other element using Javascript with nodelist

Question

Need help with using js script.

<ul class="producers-links">
    <li class="section_All active-producer">A-Z</li>
    <li class="section_0-9">0-9</li>
    <li class="section_A">A</li>
    <li class="section_B">B</li>
    <li class="section_C">C</li>
</ul>

And

 <div class="producers-list">
    <div class="producers-container" id="producers-0-9">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container" id="producers-A">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container" id="producers-B">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container" id="producers-C">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>

How to make js script that will allow user click on list element then all divs from producers-list will get display:none without this one which was clicked at list.

    var producersList = document.querySelectorAll('ul.producers-links>li');
    var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
    for (var i = 0; i < producersList.length; i++) {
        producersList[i].addEventListener('click', function () {
            document.querySelector('.active-producer').classList.remove('active-producer');
            this.classList.add('active-producer');

            var index = 0,
                length = producersList.length;
            for (; index < length; index++) {
                producersLists[index].style.display = "none";
            }
        });

    }

This allow me to hide all elements from producers-container but i don't know how to show only one element clicked before at list.

Answer 1

First of all you should use classes instead of id in the second list in order to have the ability to add more procedures in the future

try this:

<ul class="producers-links">
    <li id="section_All" class="active-producer">A-Z</li>
    <li id="section_0-9">0-9</li>
    <li id="section_A">A</li>
    <li id="section_B">B</li>
    <li id="section_C">C</li>
</ul>

<div class="producers-list">
    <div class="producers-container section_0-9 section_All">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container section_A section_All">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container section_B section_All">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container section_C section_All">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>

    var producersList = document.querySelectorAll('ul.producers-links > li');
    var producersLists = document.querySelectorAll('.producers-container');

    for (var i = 0; i < producersList.length; i++) {
        producersList[i].addEventListener('click', function () {
            document.querySelector('.active-producer').classList.remove('active-producer');
            this.classList.add('active-producer');

            for (var index = 0; index < producersLists.length ; index++) {

                var currElement = producersLists[index];
                var hide = !currElement.classList.contains(this.id);
                producersLists[index].style.display =  hide? "none" : "block";
            }
        });

    }