We Keep Coding

I have a sidebar with toggle menu but it don't work

I have a sidebar in my cPanel, And this sidebar has a menu toggle.
for example ==>
When clicking on the 'Account setting' there are some links or options under it.
And this is my code
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-dock-top"></i>
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
Note : I'm working in Angular 14

Bootstrap collapsed navbar not staying collapsed after clicking sub menu

In bootstrap, with the below code i am able to expand and collapse the 2 menus. But when i expands a menu and click on the sub menu, then the sub menus are not staying collapse..
When i changed this line from class="collapse list-unstyled " to class="collapse list-unstyled show" the menus are collapsed and not shrinking when i click on the next main menu...
<?php include('header.php'); ?>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<ul class="list-unstyled components top_admin">
</ul>
<ul class="list-unstyled components">
<li>
<a href="dashboard.php" data-toggle="collapse" aria-expanded="false" >
<i class="fa fa-tachometer" aria-hidden="true"></i>
<span>DASHBOARD </span>
</a>
</li>
<li>
<a href="#my_note1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes1</span>
</a>
<ul class="collapse list-unstyled " id="my_note1">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
</ul>
</li>
<li>
<a href="#my_note2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fa fa-hand-o-up" aria-hidden="false"></i>
<span>My Notes2</span>
</a>
<ul class="collapse list-unstyled " id="my_note2">
<li>
<span class="small_menu">CN</span>
<a class="la_cls" href="page1.php">Create Note</a>
</li>
<li>
<span class="small_menu">SN</span>
<a class="la_cls" href="#">Search Notes</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
I need after clicking the sub menu the sub menus should me stayed collapsed util i click on the another main menu. Anyone please help me, what should i do to solve this problem. Thanks in advance..

<header role="banner" id="top" class="navbar navbar-static-top">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">M-Panel</div>
</div>
<div class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=""><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-list-alt"></span> Offers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> All Offer Details</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Create Offer ID</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-book"></span> Reports <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Click Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Live Report</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> This Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> Last Month Revenue</li>
<li class=""><span class="glyphicon glyphicon-align-justify"></span> News Reports</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-user"></span> Accounts <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><span class="glyphicon glyphicon-align-justify"></span> View Accounts</li>
<li class=""><span class="glyphicon glyphicon-pencil"></span> Add Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" >
<span></span>
<small>Welcome,</small> User <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
</div>

How to Display anchor elements Inline which are in a list element in dropdown-menu

Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.

Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>

Bootstrap navbar submenu Active State not working

Bootstrap navbar Active State is not working.
I have bootstrap v3.
I use the class="active" on mynavbar on its submenu when I collapse none work.
Here is my code with js/css/bootstrap files I have included:
<li class="active">
<a href="javascript:;" data-toggle="collapse" data-target="#demoadmin">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul id="demoadmin" class="collapse in">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>

You didn't show us enough HTML to see exactly what you are doing wrong, but it looks like you're trying to get the active class to work on a bootstrap dropdown-menu.
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
DEMO

Try this
$(document).ready(function(){
$(".active").removeClass("active");
$(".dropdown-menu li").addClass("active");
});

How to add class in li then ul under li once click any item

I fall an issue and have been trying to solve it for few hours but couldn't. I have a sidemenu bar which is as following format:
<ul class="collapse" id="menu">
<li class="panel active">// class "active" should be added <a data-target="#dashboard-nav" class="accordion-toggle" data-toggle="collapse" data-parent="#menu" href="#">
<i class="icon-dashboard"></i> Dashboard <span class="pull-right"><i class="icon-angle-left"></i></span>
</a>
<ul id="dashboard-nav" class="collapse in">// class "in" should be added
<li class=""><i class="icon-angle-right"></i>Default Style
</li>
<li class=""><i class="icon-angle-right"></i> Alternative Style
</li>
</ul>
</li>
<li class="panel"> <a data-target="#registrations-nav" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#menu" href="#">
<i class="glyphicon glyphicon-user"></i> Registrations<span class="pull-right"><i class="icon-angle-left"></i></span>
</a>
<ul id="registrations-nav" class="collapse">
<li><i class="icon-plus-sign"></i> Create Registration
</li>
<li class="active"><i class="icon-list"></i> List Registration
</li>
<li><i class="icon-adn"></i> Manage Registration
</li>
</ul>
</li>
<li class="panel"> <a data-target="#settings-nav" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#menu" href="#">
<i class="icon-wrench"></i> Settings <span class="pull-right"><i class="icon-angle-left"></i> </span>
</a>
<ul id="settings-nav" class="collapse in">
<li class="active"><i class="icon-leaf"></i> Services
</li>
<li class=""><i class="icon-angle-right"></i> Sites
</li>
<li class=""><i class="icon-angle-right"></i> Service Points
</li>
</ul>
</li>
</ul>
Once I click any item of <li class="panel"> a class "active" should be added in it as <li class="panel active"> and also "in" class in following '<ul> as
<li class="panel">
...
<ul id="dashboard-nav" class="collapse in">
Please let me know if I couldn't explain clearly.
Thanks in advance

fiddle DEMO
$('li.panel').click(function () {
$('li.panel').removeClass('active');//remove active class from all li with class panel
$('li.panel').children('ul').removeClass('in');//remove in class
$(this).addClass('active'); // add class active to current li
$(this).children('ul').addClass('in'); //add in class to the children ul
});
References
.addClass()
.removeClass()
.children()
this keyword

I made a javascript solution for it as follows:-
window.onload=start;
function start(){
var list = document.getElementById("menu").childNodes;
for(i=0;i<list.length;i++){
list[i].onclick=clicked;
}
}
function clicked(){
var input = this;
input.className = "panel active"
var child = input.getElementsByTagName("ul")[0];
child.className = "collaspe in"
}