We Keep Coding

Collapse Side-nav on click responsive

I adjust a bougth onepage-template for my wishes, but unfortunately I'm not good in JS.
So, I have a side menu, which stays in desktop version. But on mobile/tablet-version I have a toggle menu icon. On click the menu opens, but when I click on a navigation-point the menu stays open. I would like to have it closed after clicking.
Thanks for your help
<aside class="nav_sidebar">
<div class="menu_wrapper">
<div class="header_top">
<div class="head_img_wrap">
<img src="images/logo.svg" alt="Images">
</div>
</div>
<div class="main_menu">
<ul>
<li class="active"><p>Home</p></li>
<li><p>Über mich</p></li>
<li><p>services</p></li>
<li><p>portfolio</p></li>
<li><p>blog</p></li>
<li><p>kontakt</p></li>
</ul>
</div>
</div>
</aside><!-- end header -->
<!-- menu toggler -->
<div class="menu_toggler">
<span class="fa fa-bars" aria-hidden="true"></span>
</div>
<!-- menu toggler -->
// Mobile menu css
var $menu_toggler = $('.menu_toggler'),
$menuSidebar = $('aside.nav_sidebar');
$menu_toggler.on('click',function () {
$(this).toggleClass('open');
$menuSidebar.toggleClass('open');
});
if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}
// collapsible menu css
$('.toggle_icon span').on('click', function () {
$menuSidebar.toggleClass('collapse');
});

Have you tried something like this?
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass('open');
});
When something is clicked in the sidebar, it will trigger the mouseup event

Ok I tried this:
// Mobile menu css
var $menu_toggler = $('.menu_toggler'),
$menuSidebar = $('aside.nav_sidebar');
$menu_toggler.on('click',function () {
$(this).toggleClass('open');
$menuSidebar.toggleClass('open');
});
if(windowWidth < 768){$menuSidebar.toggleClass('shrinked');}
// collapsible menu css
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass('open');
});
and it works but the toggle icon stays in the middle after closing. It should go back on the left side. Someone help for this problem?

You are using the open class on both the menu and the button, so:
$menuSidebar.on("mouseup", function() {
$menuSidebar.removeClass("open");
$menu_toggler.removeClass("open");
});

Open Collapse Tab in Hover in Bootstrap

I am having Collapse Panel in Bootstrap which is opening on a click on the title of the tab. I am trying to figure out to open using the hover of the mouse on the total width of the tab but I am not getting it. Below is the code of the single tab which is close by default.
<div class="panel panel-default" style="background-color:#039;">
<div class="panel-heading" style="background-color:#039;">
<a class="nodecoration panel-title lead" data-toggle="collapse" data-parent="#panel-814345" href="#panel-element-566205">Software Development</a>
</div>
<div id="panel-element-566205" class="panel-collapse collapse" style="background-color:#039; color:#fff;">
<div class="panel-body" style="border:none; font-size:14px; padding-bottom:0; margin-bottom:0;">
We work for almost all web based application, database-driven systems, mapping and geo-spatial applications, and large content managed websites
<br /><br /><p style="font-style:italic; font-weight:700;">Find out more</p>
</div>
</div>
</div>
If we change the css class from class="panel-collapse collapse" to class="panel-collapse collapse in" then the tab is open. Could you please let me know how to achieve this.
I GOT THE ANSWER BUT WORKING ONLY BY HOVER ON THE TITLE NOT ON THE TOTAL WIDTH OF THE TAB. THE CODES ARE BELOW
$(function() {
$(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) {
var $this = $(this),
href, target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')
,
option = $(target).hasClass('in') ? 'hide' : "show";
$('.panel-collapse').not(target).collapse("hide");
$(target).collapse(option);
})
});
Can we make this to work by hover on the full width ??

You can achieve this with hover function
$(".panel-heading").hover(
function() {
$('.panel-collapse').collapse('show');
}, function() {
$('.panel-collapse').collapse('hide');
}
);
But it will close the panel as soon as mouse leaves the title header
Fiddle with hover
Alternate solution is mouseenter function
$(".panel-heading").mouseenter(function () {
$(".panel-collapse").fadeIn();
});
$(".panel-collapse").mouseleave(function(){
$(".panel-collapse").fadeOut();
});
With this the panel only close when mouse leaves the panel body.
Fiddle with mouseenter

You can combine js hover event and collapse bootstrap methods as events too.
If i understood your question correctly.

UI-Bootstrap Collapse doesn't reset on new route

Working example: http://executionists.com (view in mobile viewport to see the problem)
I'm using the collapse directive from UI Bootstrap and it works great to toggle my menu on/off. However, when I click a menu item, I'm routed to a new view (which is what it should do) but then the menu stays open. It actually flashes for a second as it appears to be collapsing but then springs back open and wont collapse until manually done.
HTML:
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">
<i class="fa fa-bars fa-4"></i>
</button>
<div class="container mobile-menu visible-xs collapse" collapse="isCollapsed">
<a ng-href="#/about">About</a>
</div>
In the relevant controller, I simply set a default state:
$scope.isCollapsed = true;
What am I missing?

Try adding something like this if I understand that this is want you need
$("div.container.mobile-menu.visible-xs.collapse div.row div.col-1 ul a").click(function() {
if (window.location.hash) {
$('.mobile-menu').height(0); //change the menu to be 'Hidden'
}
});
UPDATE
$("div.container.mobile-menu.visible-xs.collapse div.row div.col-1 ul a").click(function() {
$('.mobile-menu').toggle(function() {
if (window.location.hash) {
$('button.btn.btn-default').click();
}
});
});

Shrinking div on Click - Jquery 1.9

I want a particular div to shrink, (Complete data should be visible) every time when user clicks on the particular icon. Here I have the class, legend-icon. so I want the anotherID,for example #Chart to shrink when user click
HTML
<div id="id1">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="legend-icon"></i> <b class="caret"></b>
</a>
<div id="legend_container" class="dropdown-menu">
<div id="smoother" title="Smoothing"></div><div id="legend"></div>
</div>
</li>
</ul>
</div>
<div id="in">
<div id="chart">
//my data
</div>
</div>
I tried like
$("i.legend-icon").click(function(){
$("#chart").animate({width: '-=50px',},"slow");
});
But Its not working. Its completely not displaying the div to -50px.. But I just want the div to shrink What should I do here?

Could you show your css for this elements to?
you can check my demo on jsfiddle, it works as you expect. But its not with your html and css, but it should be the same.
click me
<div class="animate-me"></div>
.animate-me {
width: 300px;
height: 100px;
background-color: aqua;
}
$(".click-me").click(function(){
$(".animate-me").animate({width: '-=50px',},"slow");
return false;
});

This seems to work just fine....
Maybe just try a bigger value, it really depends on how big your element is...
In my example, its 500px wide, and I shrink it 450...
Example Here
$("i.legend-icon").click(function(){
$("#chart").animate({width: '-=450px',},"slow");
});

try to be more specific on what you want the container to be after shrinking. animat can have much more controls:
... animate(
{
"left":<positionafter shrinking>,
"width":["toggle", "swing"]
},
{
"duration": 0,
"step": function( now, fx ){},
"complete": function(){
have a look at the animate doc on the details.

how can I remove the subnavigation overlap?

I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?
url: http://arabic001.com
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01').mouseleave(function() {
$('#subNav01').hide('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav02').show('slow');
});
$('#subNav02').mouseleave(function() {
$('#subNav02').hide('slow');
});
})
I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:
html
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display:none;">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">
<div id="engNavText02">Numbers</div>
<div id="arbNavText02">الأحرف</div>
<div id="subNav02" style="display: none; ">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
and the JS
$(document).ready(function() {
$('.menu_item').children().hover(
function(){
$subNav = $(this).parents('menu_item').children("div[id^='subNav'");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});
})

You've created a mouseleave event, but you've only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:
$('#arbNavText01').mouseover(function() {
$('#subNav02').hide('slow');
$('#subNav01').show('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav01').hide('slow');
$('#subNav02').show('slow');
});
Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren't clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.
I'm going to spit ball an idea, it may not even work let alone be the best way.
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display: none; ">
<span style="font-size:26px; cursor:pointer;">قراءة</span
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">...
Edited JS, I think now it could work
$('.menu_item').hover(
function(){
$subNav = $(this).children("div[id^='subNav']");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).children("div[id^='subNav']").hide('slow');
}
);
Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.