<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>

.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;
 }