We Keep Coding

Jquery toggle sidebar with 2 buttons

I am trying to create a toggle on a sidebar so that the toggle button opens the sidebar. This works great on desktop, however, if I am using mobile, the toggle button gets hidden. Is it possible to add a close button in the sidebar which can close the sidebar without breaking the script? The script I have is:
<div id="sidebar">content</div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
jQuery(document).ready(function() {
jQuery("#filter-icon").click(function() {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
});
});
</script>

Shouldn't be a problem, have you tried something like this?
<div id="sidebar"><button id="closeSidebar">Close</button></div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
const toggleSidebarAndSwitch = () => {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
}
jQuery(document).ready(() => {
jQuery("#filter-icon").click(() => {
toggleSidebarAndSwitch()
});
jQuery("#closeSidebar").click(()=>{
toggleSidebarAndSwitch()
})
});
</script>

Yes it's possible just add another div in your sidebar like this:
<div id="sidebar">
content
<div class="filterswitch"></div>
</div>
<div id="filter-icon">
Refine Selection
<div class="filterswitch"></div>
</div>
If you ad the class filterswitch to both div's jQuery will automatically listen for clicks on both elements.

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

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

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');