multiple drop downs appearing at the same time

Question

I have a drop-down list, the problem is, when I try to open one list after another, the first one still remains unclosed. How can I close one list while opening another

$(document).ready(function() {
    $('.dropdown-submenu a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
    <p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i>&nbsp;CATEGORY</p>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

You can't use toggle for multiple accordion menu style.

I have updated your HTML design with some classes for your accordion design. Add following codes in your file.

CSS

.closed{display:none;}
.opened{display:block;}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
    <p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i>&nbsp;CATEGORY</p>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu opened">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu opened">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu closed">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu closed">
                        <li><a href="#">3rd level dropdown</a></li>
                        <li><a href="#">3rd level dropdown</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

jQuery

$(function(){

    $('.dropdown-submenu a.test').on("click", function(e){  

        var ul = $(this).next('ul');
        if(ul.hasClass('opened')){
            ul.removeClass('opened').addClass('closed');
        }else{
            ul.addClass('opened').removeClass('closed');
        }
        if($(this).parents('ul').length == 1){
            $(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
        }

        e.stopPropagation();
        e.preventDefault();
    });

});

demo : https://jsfiddle.net/zsyajqt8/10/