html - Convert JQuery to Javascript (tree menu)

Question

How do I convert this jQuery code to plain JavaScript?

I have tried every conceivable way. Via multiple variables and putting "this" element on the items. I get stuck with the "if does not contain" part which seems to break.

I know it is possible.

Can anyone pretty please help. :)

I have added all of the CSS and HTML so you can see how it works.

$(document).ready(function () {
    $("#accordian a").click(function () {
        var link = $(this);
        var closest_ul = link.closest("ul");
        var parallel_active_links = closest_ul.find(".active");
        var closest_li = link.closest("li");
        var link_status = closest_li.hasClass("active");
        var count = 0;

        closest_ul.find("ul").slideUp(function () {
            if (++count == closest_ul.find("ul").length)
                parallel_active_links.removeClass("active");
        });

        if (!link_status) {
            closest_li.children("ul").slideDown();
            closest_li.addClass("active");
        }
    })
})

* {
        margin: 0;
        padding: 0;
}

#accordian {
        width: 100%;
        margin: 50px auto 0 auto;
}

#accordian h3 {

}

#accordian h3 a {
        padding: 0 10px;
        font-size: 12px;
        line-height: 34px;
        display: block;
        text-decoration: none;
}

#accordian h3:hover {
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

i {
        margin-right: 10px;
}

#accordian li {
        list-style-type: none;
}

#accordian ul ul li a,
#accordian h4 {
        text-decoration: none;
        font-size: 11px;
        line-height: 27px;
        display: block;
        padding: 0 15px;
        transition: all 0.15s;
        position: relative;
}

#accordian ul ul li a:hover {

        border-left: 5px solid lightgreen;
}

#accordian ul ul {
        display: none;
}

#accordian li.active>ul {
        display: block;
}

#accordian ul ul ul {
        margin-left: 15px;
        border-left: 1px dotted rgba(0, 0, 0, 0.5);
}

#accordian a:not(:only-child):after {
        content: "f104";
        font-family: fontawesome;
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 14px;
}

#accordian .active>a:not(:only-child):after {
        content: "f107";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordian">
        <ul>
                <li>
                        <h3><a href="#"><i class="fa fa-lg fa-tachometer"></i>Dashboard</a></h3>
                        <ul>
                                <li><a href="#">Reports</a></li>
                                <li><a href="#">Search</a></li>
                                <li><a href="#">Graphs</a></li>
                                <li><a href="#">Settings</a></li>
                        </ul>
                </li>
                <li class="active">
                        <h3><a href="#"><i class="fa fa-lg fa-tasks"></i>Tasks (active)</a></h3>
                        <ul>
                                <li><a href="#">Today's tasks</a></li>
                                <li class="active">
                                        <a href="#">DrillDown (active)</a>
                                        <ul>
                                                <li><a href="#">Today's tasks</a></li>
                                                <li><a href="#">Urgent</a></li>
                                                <li>
                                                        <a href="#">Overdues</a>
                                                        <ul>
                                                                <li><a href="#">Today's tasks</a></li>
                                                                <li><a href="#">Urgent</a></li>
                                                                <li><a href="#">Overdues</a></li>
                                                                <li><a href="#">Recurring</a></li>
                                                                <li><a href="#">Settings</a></li>
                                                        </ul>
                                                </li>
                                                <li><a href="#">Recurring</a></li>
                                                <li><a href="#">Settings</a></li>
                                        </ul>
                                </li>
                                <li>
                                        <a href="#">Overdues</a>
                                        <ul>
                                                <li><a href="#">Today's tasks</a></li>
                                                <li><a href="#">Urgent</a></li>
                                                <li><a href="#">Overdues</a></li>
                                                <li><a href="#">Recurring</a></li>
                                                <li><a href="#">Settings</a></li>
                                        </ul>
                                </li>
                                <li><a href="#">Recurring</a></li>
                                <li><a href="#">Settings</a></li>
                        </ul>
                </li>
                <li>
                        <h3><a href="#"><i class="fa fa-lg fa-calendar"></i></span>Calendar</a></h3>
                        <ul>
                                <li><a href="#">Current Month</a></li>
                                <li><a href="#">Current Week</a></li>
                                <li><a href="#">Previous Month</a></li>
                                <li><a href="#">Previous Week</a></li>
                                <li><a href="#">Next Month</a></li>
                                <li><a href="#">Next Week</a></li>
                                <li><a href="#">Team Calendar</a></li>
                                <li><a href="#">Private Calendar</a></li>
                                <li><a href="#">Settings</a></li>
                        </ul>
                </li>
                <li>
                        <h3><a href="#"><i class="fa fa-lg fa-heart"></i>Favourites</a></h3>
                        <ul>
                                <li><a href="#">Global favs</a></li>
                                <li><a href="#">My favs</a></li>
                                <li><a href="#">Team favs</a></li>
                                <li><a href="#">Settings</a></li>
                        </ul>
                </li>
        </ul>
</div>

question from:https://stackoverflow.com/questions/65894059/convert-jquery-to-javascript-tree-menu

Answer 1

Waitting for answers