Accordion Left Categories Menu

Hey.

I am using nopCommerce 3.60 with DefaultClean theme.

I want accordion menu in categories UL+LI.
How is it coded in a file _CategoryNavigation.cshtml? Is next ULs loaded when the previous LI is clicked and the page is refreshed only?
I have tried different jQuery accordion menus (plugins and scripts), but they seemed not to work.

So, eventually, how can I do it?

Please, if you know how to do this, hep me!

Thank you very much.

if you have applied set proper HTML strucuture and appropriate Accordion JS classes then it should work.

please tripple check that its using the required html structure and its classes for accordion JS

The first problem is that all links are clickable. So, when you click it turns to a page of a link, which you have just clicked.
Also the other issue is that the next sublist ULs are not loaded till you click to the previous/next link.

In CategoryNavigation.cshtml I have this code:

@model CategoryNavigationModel
@using Nop.Web.Models.Catalog;

@functions{
    public bool BreadCrumbContainsCurrentCategoryId(CategorySimpleModel category)
    {
        if (Model.CurrentCategoryId == 0)
            return false;

        if (category.Id == Model.CurrentCategoryId)
            return true;

        foreach (var subCategory in category.SubCategories)
        {
            if (BreadCrumbContainsCurrentCategoryId(subCategory))
            {
                return true;
            }
        }

        return false;
    }
}
@helper RenderCategoryLine(CategorySimpleModel category)
{
    bool active = category.Id == Model.CurrentCategoryId || category.SubCategories.Count(BreadCrumbContainsCurrentCategoryId) > 0;
    bool last = category.Id == Model.CurrentCategoryId;
    string liClass = active ? "active" : "inactive";
    if (last)
    {
        liClass += " last";
    }
    <li class="@liClass">
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
            }
        </a>
        @{
            if (category.Id == Model.CurrentCategoryId ||
                category.SubCategories.Count(BreadCrumbContainsCurrentCategoryId) > 0)
            {
                if (category.SubCategories.Count > 0)
                {
            <ul class="sublist">
                @foreach (var subCategory in category.SubCategories)
                {
                    @RenderCategoryLine(subCategory)
                }
            </ul>
                }
            }
        }
    </li>
}
@if (Model.Categories.Count > 0)
{
    <div class="block block-category-navigation">
        <div class="title">
            <strong>@T("Categories")</strong>
        </div>
        <div class="listbox">
            <ul class="list">
                @foreach (var category in Model.Categories)
                {
                    @RenderCategoryLine(category)
                }
            </ul>
        </div>
    </div>
}

I want only the last link to be clickable.

How to do it?

Please, help.