How to slide down one list from a group of lists and close others with one click?

Question

I have 4 un-ordered lists. Each one of them has many list items (li's). I want when I click on one list header all list items are displayed while close all other un-ordered lists' items.

I have made one un-ordered list which has 4 list items. Each one list has another un-ordered list and each one of them has many list items (nested lists). each list has one category for cities, provinces, and other links. once I click on "for example on first list header" ( cities in the same province), dropdown list is displayed. In the same time with the same click, All other lists' items all closed "hidden". I have done the following code:

<ul class="menu city_list">
                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category">cities in the same province </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>




                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category">country cities </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>



                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category">provinces </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>


                        <li classs="extend">
                            <a href="">
                                <h5 id="accordionItemHeading" class="category"> some other city link </h5>
                            </a>
                            {% for city in citie_in_province %}
                                <div class=" sss sss_close">
                                    <ul class='category'>
                                        <li >
                                            <a href="">{{city.city_name}}</a>
                                        </li>
                                     </ul>
                                 </div>
                            {% endfor %}
                        </li>

                    </ul>


    <script>
    var accHD = document.getElementById('accordionItemHeading');
    var content = document.getElementsByClassName('sss');

    for (i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
    var itemClass = this.className;
    hide_content = getElementsByClassName('sss sss_close')
    if (hide_contents == 'sss sss_close') {
        hide_contents.className = 'sss sss_open';
    }
    else{
        content.className = 'sss sss_close'
    }
    }
</script>

Here is the css code:

.sss_close{
 height:0px;
 transition:height 1s ease-out;
 -webkit-transform: scaleY(0);
 -o-transform: scaleY(0);
 -ms-transform: scaleY(0);
 transform: scaleY(0);
 float:left;
 display:block;
 }


 .sss_open{
 -webkit-transform: scaleY(1);
 -o-transform: scaleY(1);
 -ms-transform: scaleY(1);
 transform: scaleY(1);
 -webkit-transform-origin: top;
 -o-transform-origin: top;
 -ms-transform-origin: top;
 transform-origin: top;

 -webkit-transition: -webkit-transform 0.6s ease-out;
 -o-transition: -o-transform 0.6s ease;
 -ms-transition: -ms-transform 0.6s ease;
 transition: transform 0.6s ease;
 box-sizing: border-box;
 }

I am interested in a solution with pure javascript code

Answer 1

I'm not sure I've understood what you want it to do correctly. Do you want clicking on a header to open all sub lists under the clicked header and close all sub lists not under the clicked header? If so, here is how you can do that:

const headingLinks = document.querySelectorAll('h5.category');
const contents = document.querySelectorAll('.sss');

for (let headingLink of headingLinks) {
  headingLink.addEventListener('click', openItem);  
}

function openItem() {
  const wasAlreadyOpen = this.classList.contains('isOpen');
  for (let headerLink of headingLinks) {
    headerLink.classList.remove('isOpen');
  }
  if (wasAlreadyOpen) {
    this.classList.remove('isOpen');
  } else {
    this.classList.add('isOpen');
  }

  for (let content of contents) {  
    const shouldBeOpen = !wasAlreadyOpen && this.parentNode.parentNode.contains(content);
    if (shouldBeOpen) {
      content.classList.remove('sss_close');
      content.classList.add('sss_open');
    } else {
      content.classList.remove('sss_open');
      content.classList.add('sss_close');
    }
  }
}

You should be able to leave everything else the same. Just replace your javascript with the above code.

You might also need to replace all header links <a href=""> with <a href="javascript:void(0);"> or remove the a tag entirely and just leave the h5 tag from inside.

Here is a working example https://jsbin.com/saluzezesu/edit?html,js,output