Develop Reference

jQuery slidetoggle keeps toggling after window resize/ready combined

I want to add slidetoggle only when screen size is less than 768px. I also want this to work when user for some reason would resize the window manually.
I have come across a bug with jQuery where my dropdown menu will keep toggling after I resize the window. I've looked up this issue and tried adding return false; to click function and adding position: relative; overflow:hidden; to toggleable div(these should be a workaround according to some forums). No luck there. What causes this bug. I will include the whole function with the click function
//Call function on ready and window resize
$(document).ready(navigationMobile);
$(window).on('resize', navigationMobile);
function navigationMobile() {
const windowWidth = $(window).width();
if (windowWidth < 768) {
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(".js-second-title").click(function () {
$(this).siblings('.js-menu').slideToggle();
$(this).toggleClass('js-open');
});
} else {
//Add href back to main link
$('.js-second-title').each(function () {
if ($(this).attr('href') === undefined) {
const allHref = $(this).siblings('ul').find('.js-all-link').attr('href');
$(this).attr('href', `${allHref}`);
$(this).siblings('ul').find('.js-all-link').remove();
}
});
}
}
Cheers!

I don't exactly know what is causing this bug. But I came up with this workaround.
//Remove href from main link and add it as a "all" link in menu
$(".js-second-title").each(function () {
$(this).addClass('js-closed');
const currentHref = $(this).attr('href');
$(this).removeAttr('href');
if ($(this).siblings('ul').find('.js-all-link').length === 0) {
$(this).siblings('ul').prepend(`<li><a class="js-all-link" href="${currentHref}">All</a></li>`);
}
});
//When clicked on main link open menu
$(document).on("click", '.js-second-title.js-closed', function (e) {
$(this).removeClass('js-closed');
$(this).siblings('.js-menu').slideDown();
$(this).addClass('js-open');
});
$(document).on("click", '.js-second-title.js-open', function (e) {
$(this).siblings('.js-menu').slideUp();
$(this).removeClass('js-open');
$(this).addClass('js-closed');
});
So here I am basically extening SlideToggle function. Before I call slide functions on click I give each js-second-title classes an extra class .js-closed so the browser is aware that the menu is closed. After that I call slideDown function when I click on closed menu title and slideUp when I click on open menu title.
I do not think that this is the best or most sematic solution so I would like to keep this topic open.

Ways to combine two click functions, when one click function has a window size if statement

I'm trying to combine two click functions to condense the code, but i'm not sure how. Thanks!
$(document).ready(function () {
//when clicking on a link hide the navigation links
$('nav a').click(function () {
if ($(window).width() < 730) {
$('nav').toggleClass('showNav');
$('.navToggle').toggleClass('iconTop');
$('.navToggle').toggleClass('iconMiddle');
$('.navToggle').toggleClass('iconBottom');
}
});
//when clicking on icon hide and show the navigation links
//the icon is only visible when the screen size is less then 730px
$('.navToggle').click(function () {
$('nav').toggleClass('showNav');
$('.navToggle').toggleClass('iconTop');
$('.navToggle').toggleClass('iconMiddle');
$('.navToggle').toggleClass('iconBottom');
});
});

Would something like this work?
$('nav a, .navToggle').click(function () {
if ($(this).hasClass('navToggle') || $(window).width() < 730) {
$('nav').toggleClass('showNav');
$('.navToggle').toggleClass('iconTop iconMiddle iconBottom');
}
});
Basically, you check if the clicked element has the class .navToggle. If it doesn't, it check the window size before doing the action.

Add a click functionality to sidebar without affecting its toggle feature

I have a sidebar and I have a button which toggles the sidebar on click. I have a jQuery function which does that. I have a new functionality now, where, if the sidebar is open and the user clicks any of the list items in the sidebar, it toggles back and some function will be excecuted.
The Problem:
When I click the li inside the sidebar, the toggle button is waiting for it's second click (my guess). So if I add toggle on clicking sidebar li, the main toggle button functionality breaks. How do I keep both without affecting each other. I hope I have made myself clear. Here is the code.
JS
// code for sidebar toggle in jQuery
$.fn.toggleClick = function () {
var methods = arguments,
count = methods.length;
return this.each(function (i, item) {
var index = 0;
$(item).on('click', function () {
return methods[index++ % count].apply(this, arguments);
});
});
};
//for opening sidebar
function openSidebar() {
$('#sg-evm-sidebar').animate({
left: 0
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 300
}, 300)
$('.content-overlay').delay(300).show();
}
//closing sidebar
function closeSidebar() {
$('#sg-evm-sidebar').animate({
left: -300
}, 300)
$('.container').css({
position: "fixed"
}).animate({
left: 0
}, 300)
$('.content-overlay').delay(300).hide();
}
//$(".empName").on("click", function () {
// closeSidebar();
//});
// calling toggleclick here
$('.toggle-box').toggleClick(openSidebar, closeSidebar);
Here is a JS FIDDLE. I created it from my huge website. So please ignore broken images.

I've updated your fiddle: http://jsfiddle.net/qvksx30g/4/
I've added some basic logic
var sidebarOpen = false;
function toggleSidebar()
{
if (sidebarOpen)
closeSidebar();
else
openSidebar();
}
And then inside openSidebar and closeSidebar I set sidebarOpen.
I also no longer use toggleClick. Instead I'm using:
$(document).on('click', '.toggle-box', toggleSidebar)
.on('click', '.list li', closeSidebar);

You could keep track of the sidebar state (open or close) using a class on the sidebar wrapper ("close" or "open"), and then use this class to determine in your click listener if you have to call closeSidebar or openSidebar.

Showing/hiding bootstap's .hidden-xs in jQuery

I'm trying to create an 'up' button, which will take user to the very top of the landing page. jsFiddle
I would like this button to be shown only on devices with large screens, so I'm using bootstrap3's hidden-xs class. This class applies display: none!important for small devices and display: block!important for large screens.
But now, I would like to make this button visible only, when scrolled down at least 50 pixels.
So, I would like to do something like:
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() < 50) {
// Near top.
$('#scrollUp:visible').slideUp();
}
else {
$('#scrollUp:hidden').slideDown();
}
});
});
jQuery's slideUp() and slideDown() apply display: none and display: block, but without !important.
This means that display: block!important applied by .hidden-xs is more important than css applied by slideDown() and slideUp().
It worked great until I started using .hidden-xs.
I tried $.animate({'display': 'none!important'}) instead of $.slideUp, but then I get another problem -- jQuery isn't properly selecting elements with :hidden. jsFiddle
Do you have an idea, what may I do wrong? Is there a way to do this nicely?
Thanks in advance!

Try
(function () {
var timer;
$(window).scroll(function () {
clearTimeout(timer)
timer = setTimeout(function () {
if ($(window).scrollTop() < 50) {
// Near top.
console.log('If elemnt is visible it should be hidden here');
$('#scrollUp:visible').stop(true, true).slideUp(function () {
$(this).removeClass('hidden-xs');
});
} else {
console.log('If element is hidden it should be displayed here');
$('#scrollUp:hidden').addClass('hidden-xs').stop(true, true).slideDown(function () {
$(this).css('display', '')
});
}
}, 100);
});
})()
Demo: Fiddle

How to slide down to show content of DIV using CSS/jQuery?

I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:
fiddle
I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.
In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.
Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.
It would be great if someone could help me out.
Thanks alot.

I think this is what you are looking at.
Fiddle
$(document).ready(function () {
$('.content').hide(); //hide initialy
$('.slide').click(function () {
var $this = $(this);
// target only the content which is a sibling
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
});
});
});

You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):
$(document).ready(function () {
$('.slide').click(function () {
$(this).prev('.content').slideToggle(500, function () {
$this = $(this);
$slide = $('.slide');
if ($this.is(':visible')) {
$slide.text('Click to close');
} else {
$slide.text('Click to open');
}
});
});
});
fiddle