Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Metronic v8.1.8, sidebar menu is not working if click show less
Hi,,
I use Metronic v8.1.8, html, and I try to fix the issue that appear with sidebar menu, when click show more --> it is working, and when click show less is not working,,
I follow the templet https://preview.keenthemes.com/metronic8/demo4/index.html,, but still is not working,, what is the issue ??
<!--begin:Menu sub-System Admin-->
<div class="menu-sub menu-sub-dropdown px-2 py-4 w-250px mh-75 overflow-auto">
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu content-->
<div class="menu-content">
<span class="menu-section fs-5 fw-bolder ps-1 py-1">@mnuSysAdmin</span>
</div>
<!--end:Menu content-->
</div>
<!--end:Menu item-->
<!--begin:Menu item-System ActivityTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "ActivityTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-abstract-33 fs-5"></i>
</span>
<span class="menu-title">@mnuActivityTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System ActivityTypes-->
<!--begin:Menu item-System Announcement-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Announcement")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-notification-status fs-5"></i>
</span>
<span class="menu-title">@mnuAddAnnouncement</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Announcement-->
<!--begin:Menu item-System AppTimes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "AppTimes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-time fs-5"></i>
</span>
<span class="menu-title">@mnuAppTimes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System AppTimes-->
<!--begin:Menu item-System Cancellation-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "CancellationReasons")" >
<span class="menu-bullet">
<i class="menu-title ki-outline ki-cross-circle fs-5"></i>
</span>
<span class="menu-title">@mnuCancellation_Reasons</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Cancellation-->
<div class="menu-inner flex-column collapse" id="kt_app_sidebar_menu_dashboards_collapse">
<!--begin:Menu item-System Admin-More list-Centers-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Centers")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-home-2 fs-5"></i>
</span>
<span class="menu-title">@mnuCenters</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Centers-->
<!--begin:Menu item-System Admin-More list-Locations-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Locations")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-geolocation fs-5"></i>
</span>
<span class="menu-title">@mnuAppLocations</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Locations-->
<!--begin:Menu item-System Admin-More list-ContactTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "ContactTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-address-book fs-5"></i>
</span>
<span class="menu-title">@mnuContactTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-ContactTypes-->
<!--begin:Menu item-System Admin-More list-ClinicTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "ClinicTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-pulse fs-5"></i>
</span>
<span class="menu-title">@mnuClinicTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-ClinicTypes-->
<!--begin:Menu item-System Admin-More list-ClinicItems-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "ClinicItemTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-syringe fs-5"></i>
</span>
<span class="menu-title">@mnuClinicItemTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-ClinicItems-->
<!--begin:Menu item-System Admin-More list-DentalLocations-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "DentalLocations")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-safe-home fs-5"></i>
</span>
<span class="menu-title">@mnuDentalLocations</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-DentalLocations-->
<!--begin:Menu item-System Admin-More list-Departments-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Departments")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-home-1 fs-5"></i>
</span>
<span class="menu-title">@mnuDepts</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Departments-->
<!--begin:Menu item-System Admin-More list-DocumentCategories-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "DocumentCategories")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-some-files fs-5"></i>
</span>
<span class="menu-title">@mnuDocCats</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-DocumentCategories-->
<!--begin:Menu item-System Admin-More list-DiagTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "DiagTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-like-folder fs-5"></i>
</span>
<span class="menu-title">@mnuDiagTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-DiagTypes-->
<!--begin:Menu item-System Admin-More list-DiscountTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "DiscountTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-discount fs-5"></i>
</span>
<span class="menu-title">@mnuDiscount_Types</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-DiscountTypes-->
<!--begin:Menu item-System Admin-More list-Employees-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Employees")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-profile-user fs-5"></i>
</span>
<span class="menu-title">@mnuEmployee</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Employees-->
<!--begin:Menu item-System Admin-More list-Hospitals-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Hospitals")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-safe-home fs-5"></i>
</span>
<span class="menu-title">@mnuHospitals</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Hospitals-->
<!--begin:Menu item-System Admin-More list-InvoiceTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "InvoiceTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-cheque fs-5"></i>
</span>
<span class="menu-title">@mnuInvoiceTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-InvoiceTypes-->
<!--begin:Menu item-System Admin-More list-Nationalities-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Nationalities")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-flag fs-5"></i>
</span>
<span class="menu-title">@mnuNationalities</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Nationalities-->
<!--begin:Menu item-System Admin-More list-PaymentTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "PaymentTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-two-credit-cart fs-5"></i>
</span>
<span class="menu-title">@mnuPayment_Types</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-PaymentTypes-->
<!--begin:Menu item-System Admin-More list-PackageRates-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "PackageRates")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-tag fs-5"></i>
</span>
<span class="menu-title">@mnuPackageRates</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-PackageRates-->
<!--begin:Menu item-System Admin-More list-PackageCategories-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "PackageCategories")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-clipboard fs-5"></i>
</span>
<span class="menu-title">@mnuPackageCategories</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-PackageCategories-->
<!--begin:Menu item-System Admin-More list-ProgressHeadlines-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "ProgressHeadlines")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-message-text fs-5"></i>
</span>
<span class="menu-title">@mnuProgHeadlines</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-ProgressHeadlines-->
<!--begin:Menu item-System Admin-More list-ParentSession-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "ParentSessionTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-folder fs-5"></i>
</span>
<span class="menu-title">@mnuParentSessionTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-ParentSession-->
<!--begin:Menu item-System Admin-More list-SessionTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "SessionTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-some-files fs-5"></i>
</span>
<span class="menu-title">@mnuSessionTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-SessionTypes-->
<!--begin:Menu item-System Admin-More list-SpecialCases-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "SpecialCases")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-like-2 fs-5"></i>
</span>
<span class="menu-title">@mnuSpecialCases</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-SpecialCases-->
<!--begin:Menu item-System Admin-More list-SWInitailClinic-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "SWInitailClinicItems")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-document fs-5"></i>
</span>
<span class="menu-title">@mnuSW_InitialClinicItem</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-SWInitailClinic-->
<!--begin:Menu item-System Admin-More list-TechnicalAids-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "TechnicalAids")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-lovely fs-5"></i>
</span>
<span class="menu-title">@mnuTechnical_Aids</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-TechnicalAids-->
<!--begin:Menu item-System Admin-More list-TransferReasons-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "TransferReasons")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-exit-right fs-5"></i>
</span>
<span class="menu-title">@mnuTransResaons</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-TransferReasons-->
<!--begin:Menu item-System Admin-More list-VariantTypes-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "VariantTypes")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-element-1 fs-5"></i>
</span>
<span class="menu-title">@mnuVariantTypes</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-VariantTypes-->
<!--begin:Menu item-System Admin-More list-Product-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="@Url.Action("Index", "Product")">
<span class="menu-bullet">
<i class="menu-title ki-outline ki-delivery-3 fs-5"></i>
</span>
<span class="menu-title">@mnuProduct</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-System Admin-More list-Product-->
</div>
<div class="menu-item">
<div class="menu-content">
<a class="btn btn-flex btn-color-primary d-flex flex-stack fs-base p-0 ms-2 mb-2 toggle collapsible collapsed" data-bs-toggle="collapse" href="#kt_app_sidebar_menu_dashboards_collapse" data-kt-toggle-text="Show Less">
<span data-kt-toggle-text-target="true">Show 12 More</span>
<i class="ki-outline ki-minus-square toggle-on fs-2 me-0"></i>
<i class="ki-outline ki-plus-square toggle-off fs-2 me-0"></i>
</a>
</div>
</div>
</div>
<!--end:Menu sub-System Admin-- </p><blockquote></blockquote>>thank you for your help
Replies (5)
Hi,
When you click less it closes the list and the dropdown menu gets closed.
Could you confirm are you using Demo 4 with dropdown menu ? If yes, there can be down a workaround to delay the dropdown menu during the click less button toggle.
Regards.
Hi Sean, thank you for your response,
Yes I use Demo 4, this dropdown menu contain a lot of items, four items show and item five is 'show more', if click on 'show more' other items show with 'less more' item, supposed to if click 'less more', dropdown menu back to show four items only, but 'less more' did not change the list of dropdown menu.
I hope you have understood what exactly my issue, I am still trying to solve it,,
Thank you for your support,
Hi Sean,
I solved it, script tag was duplicate and remove it , now it is working properly,
Thank you for your support,
Hi 
,
Glad to hear that All the best with your project. If you need any further help please do let us know.
Fueling Metronic's future is easy! Spread the word among your connections and help our sales grow, it allows us to reinvest even more into Metronic, bringing you even more exciting features and updates in the future.
Regards,
