We Keep Coding

How to edit html section Real Time with JavaScript?

I have Category list sidebar and I want to make it sortable up and down, also remove one list of them with bottom.
Here is image:
example
HTML CODE:
<div class="side-nav-categories">
<div class="title"><strong>Category</strong></div>
<ul id="category-tabs">
<li> Web Applications<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li>Script<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>Javascript</li>
<li>jQuery</li>
<li>Angular JS</li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li>Server Script<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>C#</li>
<li>PHP</li>
<li>ASP.Net</li>
</ul>
</li>
</ul>
</div>

You can grab the element from its id:
document.getElementById(**yourId**).innerHTML = 'Realtime';
The above line just changed the value inside an element in realtime, using JavaScript. Keep in mind though, that you don't need to use innerHTML, you can use any JavaScript attribute that you want.

Keep dropdown menu open after navigating to another page

I have this side menu, each item with sub-items, that when clicked go to another page.
When I press the sub-item News of MAIN and I load another page, the menu collapses like in the first photo. Is there any way to keep the menu open when navigating to other pages. This below is my HTML code. I've been stuck for two days with this problem. I've tried options from similar questions here but no luck. I'm fairly new to front-end development, so any help would be appreciated.
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <i class="menu-icon fa fa-home"></i>Home </li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-calendar"></i>MAIN
<ul id="navigation" class="sub-menu children dropdown-menu">
<li>News</li>
<li>Sport</li>
<li>Lifestyle</li>
<li>Economy</li>
<li>Politics</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bolt"></i>ABOUT
<ul class="sub-menu children dropdown-menu">
<li>Authors</li>
<li>History</li>
<li>Trivia</li>
</ul>
</li>
</ul>
</div>

var url = location.href;
$('.sub-menu').each(function() {
var $dropdownmenu = $(this);
$(this).find('li').each(function() {
if( $(this).find('a').attr('href')== url ) {
console.log( $dropdownmenu ); // this is your dropdown menu which you want to display
console.log($($dropdownmenu).parents('li')); // this is the parent list item of the dropdown menu. Add collapse class or whatever that collapses its child list
}
});
});
This code will help
*Modified

Maybe you can save the "status" of menu on a cookie or on session, like a snapshot and read it when you are loading the page.

Using javascript find the anchor that's URL matches the current URL and then toggle it's parent's visibility.
Obviously, you will need to tweak for your specific needs.
$(document).ready(function(){
//var current_url = window.location.href;
var current_url = "news";
$(".sub-menu").find("a[href='" + current_url + "']").closest("ul").addClass("show");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <i class="menu-icon fa fa-home"></i>Home </li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-calendar"></i>MAIN
<ul id="navigation" class="sub-menu children dropdown-menu">
<li>News</li>
<li>Sport</li>
<li>Lifestyle</li>
<li>Economy</li>
<li>Politics</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bolt"></i>ABOUT
<ul class="sub-menu children dropdown-menu">
<li>Authors</li>
<li>History</li>
<li>Trivia</li>
</ul>
</li>
</ul>
</div>

When each main list item is expanded, it has a show class added. You could check what URL the user is going to, and if it's under that submenu, pass that into the list items classlist via your templating engine. It would look something like
<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
And resolve to
<li class="menu-item-has-children dropdown show">
Thus being expanded on the next page.
Edit: The same class needs to be added to the <ul> element below the parent <li>, i.e.
<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
...
<ul id="navigation" class="sub-menu children dropdown-menu {% if showClass %}show{% endif %}">

fadeToggle is not a function

I was trying not to ask here about it because I think this must be something easy to solve, fact is, alone i'm not being able to solve it, so...
I copied the following Bootstrap 4 navigation from jsfiddle and it was working just fine!
<nav>
<ul>
<li>About</li>
<li>Services</li>
<li>Work</li>
</ul>
<div class="button">
<a class="btn-open" href="#"></a>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>About
<ul>
<li>About Company</li>
<li>Designers</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Development</li>
<li>Apps</li>
<li>Graphic design</li>
<li>Branding</li>
</ul>
</li>
<li>Work
<ul>
<li>Web</li>
<li>Graphic</li>
<li>Apps</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://mario-loncarek.from.hr/">
<div class="social-icon">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-codepen"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-behance"></i>
</div>
</a>
<a href="#">
<div class="social-icon">
<i class="fa fa-dribbble"></i>
</div>
</a>
<p>
From: Zagreb, Croatia<br>
Site: mario-loncarek.from.hr
</p>
</div>
</div>
</div>
And this is the JS
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
Pretty simple I guess, even for me, but when I click on the hamburguer icon, it shows me a message "$('...').fadeToggle() is not a function". I saw people saying that it's due the fact that the jQuery selector must be pointing to a element instead of an object, but I can't figure by myself how to fix in this context. I'll be very glad if you guys can help me!
P.S: I didn't put the CSS cause it's ok, the only problem is with the fadeToogle error.
Thank you in advance!

Just a heads up, I ran into this issue because I unknowingly had included the SLIM build which apparently jettisons pretty animations such as fadeToggle.

Sidebar Functionality using jquery

Here is the code of the sidebar :
$('.sidebar-nav-menu,sidebar-nav-submenu').click(function(){
$(this).toggleClass('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-alt">
<div class="sidebar-content">
<ul class="sidebar-nav">
<li>
<i class="fa fa-dashboard sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard</span>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Advanced Settings</span>
<ul>
<li>
Site Settings
</li>
<li>
Appearance
</li>
<li>
Login & Registration Settings
</li>
<li>
Session Settings
</li>
<li>
Mailer Settings
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-rocket sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">User Interface</span>
<ul>
<li>
Widgets
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Elements
<ul>
<li>
Blocks & Grid
</li>
<li>
Typography
</li>
<li>
Buttons & Dropdowns
</li>
<li>
Navigation & More
</li>
<li>
Progress & Loading
</li>
<li>
Tables
</li>
</ul>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Forms
<ul>
<li>
Components
</li>
<li>
Wizard
</li>
<li>
Validation
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Icon Packs
<ul>
<li>
Font Awesome
</li>
<li>
Glyphicons Pro
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
WHAT I WANT
On clicking the a tag having class 'sidebar-nav-menu' it adds the 'open' class to the a tag and shows the first level of ul.
On clicking the a tag having class 'sidebar-nav-submenu' it adds the 'open' class to the a tag and shows the second level of ul.
Now i want to close all other second level 'sidebar-nav-submenu' if i open one second level 'sidebar-nav-submenu'.
Also if i open 1st level 'sidebar-nav-menu' then it should hide all other 'sidebar-nav-menu'
Any idea?

If I understand correctly, you can check to see if the (sub)menu is already open and if it is not then remove the class open from all other (sub)menus.
Edited the click submenu
$('.sidebar-nav-menu,.sidebar-nav-submenu').click(function() {
if (!$(this).hasClass('open')) {
if ($(this).hasClass('sidebar-nav-menu')) {
$('.sidebar-nav .sidebar-nav-menu .sidebar-nav-submenu.open').removeClass('open');
$('.sidebar-nav .sidebar-nav-menu.open').removeClass('open');
} else if ($(this).hasClass('sidebar-nav-submenu')) {
$('.sidebar-nav .sidebar-nav-submenu.open').removeClass('open');
}
}
$(this).toggleClass('open');
});
Let me know if this helps.

Javascript Submenu Issue

Disclaimer! ... I am not real keen on front end development.
I have a nav menu that has two sub-menus. I am using the Symfony 3 framework for the application, so twig is involved. My base template has the navigation code so it should be available on all extended twig pages. Here is the html
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-th"></i> Dashboard
</li>
<li><i class="glyphicon glyphicon-stats"></i> Emails</li>
<li><i class="glyphicon glyphicon-user"></i> Users</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Admin
<span class="caret pull-right"></span>
</a>
<ul>
<li><i class="glyphicon glyphicon-user"></i> My Profile</li>
<li>Change Password</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Public Pages
<span class="caret pull-right"></span>
</a>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</li>
<li>Logout</li>
</ul>
On the dashboard page it works just as expected.When "Admin" is clicked, the sub menu opens and the sub links are displayed. Click the other, the first sub menu closes and the other opens up.
However, when I switch to another page such as "Emails" when any of the sub menus are clicked it immediately closes. I have tried multiple ways to try and fix this but it does not seem to work. Here is the javascript for "submenu"
$(".submenu > a").click(function(e) {
e.preventDefault();
var $li = $(this).parent("li");
var $ul = $(this).next("ul");
if($li.hasClass("open")) {
$ul.slideUp(350);
$li.removeClass("open");
} else {
$(".nav > li > ul").slideUp(350);
$(".nav > li").removeClass("open");
$ul.slideDown(350);
$li.addClass("open");
}
});
Thank you for your help.