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");
});

Expand/Collapse several blocks at the same time?

I have several blocks in my page. I use bootstrap 4 alpha 6 version. I want expand/collapse these blocks by clicking one button. Right know I use next js code and it only open all blocks but how to close them?! How to fix this problem?
HTML:
<div class="card">
<div class="card-header">
<button id='expand-collapse' type="button" data-parent="#blocks" data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
</button>
</div>
<div class="card-block">
<div id="blocks">
<div class="list-group">
<div class="list-group-item">
<a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1"OPEN FIRST</a>
<div class="collapse block" id="block-1">
<!--FIRST BLOCK BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN SECOND</a>
<div class="collapse block" id="block-2">
<!--SECOND BLOCK-->
</div>
</div>
<div class="list-group-item">
<a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN THIRD</a>
<div class="collapse block" id="block-3">
<!--THIRD BLOCK-->
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click event
var target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each element
if ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-commenting-o")
.removeClass("fa-commenting-o")
.addClass("fa-commenting");
}).on('hidden.bs.collapse', function(event) {
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-commenting")
.removeClass("fa-commenting")
.addClass("fa-commenting-o");
});
});

The code that youve used will work as expected in bootstrap3 due to the way collapse was handled then (You can verify it by using JS & CSS of bootstrap V3)
Comming to solving your problem the following snippet would work as expected:
$(function() {
$('#expand-collapse').on('click', function() { // We capture the click event
var target = $(this).attr('data-target'); // We get teh target element selector
$(target).each(function() { // Loop through each element
if ($(this).hasClass('show')) { // Check if it's already visible or not
$(this).collapse('hide'); // Show and hide accordingly
} else {
$(this).collapse('show');
}
});
});
});
TIP:
We can also pass toggle argument to the collapse function and get rid of the if-else condition
$(this).collapse('toggle'); can be used to replace the if-else
But I did not use this in my example to show that you can add additional computation in it
Working Fiddle
UPDATE:
The updated question asks for individual control for the block
To acheive that, we can use the default method of triggering the action with a button element.
<div class="list-group-item">
<div class="collapse block" id="block-1">
FIRST BLOCK
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#block-1">
Block 1
</button>
You can find the updated jsFidde here

Add an else statement to handle all other cases that don't match the criteria to show. Try this:
$(function () {
$('#expand-collapse').on('click',function(){
$('[data-toggle="collapse"]').each(function(){
var objectID=$(this).attr('data-target');
if($(objectID).hasClass('.collapse')===false)
{
$(objectID).collapse('show');
} else {
$(objectID).collapse('hide');
}
});
});
});

There is an error with the Bootstrap v4.0.0-alpha.6 version with the transitioning that will be solved on the next release.
See the issue 22256 and pull 21743 links for more information.

Responsive menu for both closing and opening link one page website?

Im working on a responsive website with side menu. And now when i click on menu item the menu collapse not going to the link (#home #About).I want both closing and opening,
<div id="sidr" class="sidr left" style="display: block; left: 0px;">
<a href="#sidr-close" class="dl-trigger icon-mobile-menu dfd-sidr-close">
<span class="icon-wrap dfd-middle-line"></span>
<span class="icon-wrap dfd-top-line"></span>
<span class="icon-wrap dfd-bottom-line"></span>
</a>
<div class="sidr-inner"><ul class="sidr-dropdown-menu"><li class="mega-menu-item nav-item menu-item-depth-0">Home</li>
and
e(".sub-nav").unbind("click").bind("touchend click", function(t) {
t.preventDefault(), e.sidr("close")
})
I used the above code. Hope i will get a correct solution.

Remove the t.preventDefault() in your js and it will work:
e(".sub-nav").unbind("click").bind("touchend click", function(t) {
e.sidr("close");
})
the prevent default is preveting your go to link behaviour.

How to solve opening & closing div bootstrap issue?

I'm rendering with handlebars a list of items and I'm using bootstrap to create a toggle div for every item. Handlebars works fine and also the toggle but not the closing-div function of bootstrap.
(I've already try to use bootstrap accordion but it was not working, so I would like solve the problem using jQuery)
Every time I open a new div it should close the other one (if there is one already open); This is not working, I can open more than one panel for time.
<section id="list-wrap">
<script id="list-items" type="text/x-handlebars-template">
{{#each cards}}
<div class="panel">
<div class="panel-heading grad">
<h4>
<span class="title-style">{{name}}</span>
<a data-toggle="collapse" href="#{{this.code}}">
<i class="chevron_toggleable indicator glyphicon glyphicon-chevron-right pull-left"></i>
</a>
<p class="apr title-style"> {{apr}} % APR </p>
</h4>
</div>
<div id="{{this.code}}" class="changeClass panel-collapse collapse">
<div class="panel-body">
<div>
<div class="img-div">
<img src="assets/{{code}}.png">
</div>
<div class="info-div"><p class="info-paragraf">{{information}}</p>
</div>
<div class="cashback-div">
<p class="cashback-paragraf-1">Cashback</p>
<p class="cashback-paragraf-2">{{cashback}}</p>
</div>
</div>
</div>
</div>
</div>
{{/each}}
</script>
</section>
this was working until I added a express server:
$('i').click(function () {
$('.changeClass').removeClass('in');
});

Try using jQuery UIs accordion as an option.
You just have to put the items in an accordion tag, wrap each item in a div as a child of the accordion div and then call the accordion method on the accordion div.
http://jqueryui.com/accordion/

I would use a jquery accordion function like this one. Fiddle
$('#accordion').accordion({
collapsible:true,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});

How to hide my collapse bootstrap 3 navbar with click on body when, collapse is visible?

I'm making a WordPress website for agency where I will go work.
I used Bootstrap 3.0, and I created a responsive menu.
How to hide menu when is collapsed and visible (2nd pic) with click on body, and menu button change it color only collapse is visible?
bootstrap.js and jquery is connected in my footer.

This is a functional solution:
$(document).on('click touchstart', function (e) {
if ($(e.target).closest(".navbar-collapse").length === 0 && $(e.target).closest('[data-target=".navbar-collapse"]').length === 0) {
$(".navbar-toggle").collapse('hide');
}
});

Try This Example
<script type='text/javascript'>
$(document).ready(function () {
function CloseNav() {
$(".navbar-collapse").stop().css({ 'height': '1px' }).removeClass('in').addClass("collapse");
$(".navbar-toggle").stop().removeClass('collapsed');
}
$('html').click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
CloseNav();
}
});
});
</script>
Update
you can change the html selector to whatever selector you want, body (if you have enough height), wrapper or whatever. A clean fiddle example here

This works. It will close the collapsed navbar when touched anywhere on the mobile touchscreen.
$(document).on('touchend', function (event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});

Here is another approach which is working for me.
My scenario: I want to hide the collapsible when I click anywhere outside of a form which contains a dropdownlist.
$(document).ready(function(){
//check if collapsible is shown
$(".collapse").on('shown.bs.collapse', function(){
//then check if there was a click
$(document).click(function(event) {
//exclude the click was on the form
if (!$(event.target).hasClass("input-default")) {
//then hide it
$(".collapse").collapse('hide');
}
});
});
});

I think your best approach would be to do something in a mediaquery, or pherhaphs with js instead, check in bootstrap page which are the break points and use the one you are interested in.

You don't want to listen for the click all the time that is so wrong. you have to bind and unbind based on the navbar status. here is my navbar-colapse and it's id is 'z', and when it is open i will listen for clicks and when it's closed i don't listen anymore. i will put comment on the code:
//CALLBACK AFTER NAVBAR-COLLAPSE OPEN
$('#z').on('shown.bs.collapse', function () {
// HERE WE BIND THE CLICK TO THE HANDLER FUNCTION
$(document).bind( "click", handler );
})
//CALLBACK AFTER NAVBAR-COLLAPSE CLOSE
$('#z').on('hidden.bs.collapse', function () {
// SINCE THE NAVBAR IS CLOSED WE DONT NEED TO LISTEN FOR CLICKS ANYMORE
$(document).unbind( "click", handler );
})
//THIS IS THE FUNCTION THAT GET FIRED
var handler = function() {
//LISTEN FOR CLICKS
$(document).click(function(event) {
//HERE FORM-CONTROL IS MY SEARCH BOX IN THE NAV SO I DONT WANT TO CLOSE
//THE NAVBAAR IF THEY CLICK ON FONT-CONTROL, BUT ANYTHING BESIDE THAT WE CLOSE THE NAVBAR
if (!$(event.target).hasClass("form-control")) {
$('#z').collapse('hide');
}
});
};
Also here is my nav-bar code :)
<nav class="navbar navbar-default my-nav" data-spy="affix" id="nav" style="margin-bottom: 0">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#z" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">-</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="z">
<div class="navbar-form navbar-left my-navbar-left" role="search">
<div class="form-group">
<input id="searchbar" type="text" class="form-control" placeholder="Search for ads">
</div>
</div>
<ul class="nav navbar-nav navbar-right my-navbar-right">
<li><a class="tab-c tab-home"> <span class="text-to-icon">Posts</span> </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

$('.collapse').collapse('hide');