Develop Reference

Side navigation menu responsive class to hide on window resize - javascript

Hey stackoverflow community!
I have a small issue regarding this JS logic to add a class name to my body tag to hide the side navigation menu upon window resizing. Let me try to explain the issue as clearly as I can. Currently I'm using a UI template by creativetime called Argon. The page when loaded on a full scaled width looks like this:
When I resize the window after the page has loaded it looks like this:
But when I refresh the page, the side navigation is no longer there as how it should be, which is like this:
After refreshing the page, resizing the window thereafter makes the side navigation to hide as it should. The sidenav just doesn't go hidden on first page load for some reason.
The JS for this is as follows:
var Layout = (function() {
function pinSidenav() {
$('.sidenav-toggler').addClass('active');
$('.sidenav-toggler').data('action', 'sidenav-unpin');
$('body').removeClass('g-sidenav-hidden').addClass('g-sidenav-show g-sidenav-pinned');
$('body').append('<div class="backdrop d-xl-none" data-action="sidenav-unpin" data-target='+$('#sidenav-main').data('target')+' />');
// Store the sidenav state in a cookie session
Cookies.set('sidenav-state', 'pinned');
}
function unpinSidenav() {
$('.sidenav-toggler').removeClass('active');
$('.sidenav-toggler').data('action', 'sidenav-pin');
$('body').removeClass('g-sidenav-pinned').addClass('g-sidenav-hidden');
$('body').find('.backdrop').remove();
// Store the sidenav state in a cookie session
Cookies.set('sidenav-state', 'unpinned');
}
// Set sidenav state from cookie
var $sidenavState = Cookies.get('sidenav-state') ? Cookies.get('sidenav-state') : 'pinned';
if($(window).width() > 1200) {
if($sidenavState == 'pinned') {
pinSidenav()
}
if(Cookies.get('sidenav-state') == 'unpinned') {
unpinSidenav()
}
$(window).resize(function() {
if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
}
})
}
if($(window).width() < 1200){
$('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
$('body').removeClass('g-sidenav-show');
$(window).resize(function() {
if( $('body').hasClass('g-sidenav-show') && !$('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hidden');
}
})
}
$("body").on("click", "[data-action]", function(e) {
e.preventDefault();
var $this = $(this);
var action = $this.data('action');
var target = $this.data('target');
// Manage actions
switch (action) {
case 'search-show':
target = $this.data('target');
$('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-showing');
setTimeout(function() {
$('body').removeClass('g-navbar-search-showing').addClass('g-navbar-search-show');
}, 150);
setTimeout(function() {
$('body').addClass('g-navbar-search-shown');
}, 300)
break;
case 'search-close':
target = $this.data('target');
$('body').removeClass('g-navbar-search-shown');
setTimeout(function() {
$('body').removeClass('g-navbar-search-show').addClass('g-navbar-search-hiding');
}, 150);
setTimeout(function() {
$('body').removeClass('g-navbar-search-hiding').addClass('g-navbar-search-hidden');
}, 300);
setTimeout(function() {
$('body').removeClass('g-navbar-search-hidden');
}, 500);
break;
}
})
// Add sidenav modifier classes on mouse events
$('.sidenav').on('mouseenter', function() {
if(! $('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-hide').removeClass('g-sidenav-hidden').addClass('g-sidenav-show');
}
})
$('.sidenav').on('mouseleave', function() {
if(! $('body').hasClass('g-sidenav-pinned')) {
$('body').removeClass('g-sidenav-show').addClass('g-sidenav-hide');
setTimeout(function() {
$('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden');
}, 300);
}
})
// Make the body full screen size if it has not enough content inside
$(window).on('load resize', function() {
if($('body').height() < 800) {
$('body').css('min-height', '100vh');
$('#footer-main').addClass('footer-auto-bottom')
}
})
})();
Working JS Fiddle: https://jsfiddle.net/Vaulient/kthw39gs/6/

Related

Am trying to change the background color of the timeline on scroll like on this site.My replication of the sample is development site. Take a look at the codepen I tried using. The closest I have come to replicating it is with the code below which makes the change in color on each timeline circle flicker on/off on scroll.
jQuery(document).ready(function($) {
function onScroll() {
$('.cd-timeline-block').each( function() {
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.05 && $(this).find('.cd-timeline-img').hasClass('cd-inactive') ) {
$(this).find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
$(this).find('.cd-date').addClass('cd-ssf-color');
} else {
$(this).find('.cd-timeline-img').addClass('cd-inactive').removeClass('cd-active');
$(this).find('.cd-date').removeClass('cd-ssf-color');
}
});
};
$(window).scroll(onScroll);
});

I have made some modification to the above code.
CodePen link:
http://codepen.io/anon/pen/KzqWVm
Javascript:
jQuery(document).ready(function($) {
var $timeline_block = $('.cd-timeline-block');
var firstelm = $timeline_block.first();
//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function() {
var _win = $(window), iselm = null;
$timeline_block.each(function(index) {
var _this = $(this);
if (((_this.offset().top - _win.height())) <= (_win.scrollTop())) {
iselm = _this;
}
});
if (_win.scrollTop() < $(firstelm).offset().top) {
iselm = $(firstelm);
}
if (iselm) {
$('.cd-active').removeClass('cd-active').addClass('cd-inactive');
iselm.find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
if ((iselm.offset().top - _win.height()) > (_win.scrollTop() * 0.75)) {
$('.cd-date').removeClass('cd-ssf-color');
}
iselm.find('.cd-date').addClass('cd-ssf-color');
}
});
});
Continuing each loop on scroll might not work properly.

I have a responsive menu. When the menu reaches tablet/mobile width it turns into a mobile menu. In the menu are 2 special buttons. #toggleReg and #toggleLogin
When the menu dropdown is Open. #toggleReg and #toggleLogin are set to .show but when the menu dropdown is closed they are set to .hide ... simple enough.
But because this is part of a responsive menu. I need #toggleReg and #toggleLogin to always .show if the browser viewports width is above 768px;
How do I add a condition that will solve this problem for me. Since it is currently set to be hidden once reaching a width below 768px; via a media query and then told to display again if the mobile menu is "opened" via the js snippet below.
Here is my current code.
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$('#toggleReg').hide();
$('#toggleLogin').hide();
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
$('#toggleReg').show();
$('#toggleLogin').show();
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
I am working with cssmenumaker source file
Thanks for any help!

I think if you just handle the window size before your allow the click, you should be able to make sure the buttons show up. Then if the window is smaller, it will check for the button being pressed.
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
//Add this clause
if($(window).width() >= 768){
$('#toggleReg').show();
$('#toggleLogin').show();
} else {
$(this).find("#menu-button").on('click', function(){
$('#toggleReg').hide();
$('#toggleLogin').hide();
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
} else {
mainmenu.show().addClass('open');
$('#toggleReg').show();
$('#toggleLogin').show();
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
}
});
}
This won't work on window resize though - only when the window loads.
UPDATE
This is how I would normally write it:
function menuState() {
var winW = $(window).width();
if(winW >= 768) {
//Handle Large Menu
$('#toggleReg').show();
$('#toggleLogin').show();
} else {
//Handle Mobile Menu
$('#toggleReg').hide();
$('#toggleLogin').hide();
$(document).on('click', '#menu-button', function() {
var menuClass = $(this).attr('class').split(" ")[1];
if(menuClass == "menu-opened") {
$(this).removeClass('menu_opened');
$(this).next('ul').removeClass('open');
} else {
$(this).addClass('menu-opened');
var mainMenu = $(this).next('ul');
if(mainMenu.hasClass('open')) {
mainMenu.hide().removeClass('open');
} else {
mainMenu.show().addClass('open');
$('#toggleReg').show();
$('#toggleLogin').show();
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
}
});
}
}
$(document).ready(function(){
menuState();
});
$(window).resize(function(){
menuState();
});
You may be able to comment out the function and just plaster this in that javascript file.

I've got a script that changes the background when an anchor touches the top of the page.
https://jsfiddle.net/u9pexc4v/
var targetOffset = $("#anchor-point").offset().top;
var $w = $(window).scroll(function () {
if ($w.scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
});
However, it does not work when it's inside the modal window.
https://jsfiddle.net/qhrmtass/

I believe you need to attach the scroll event to the element that's scrolling.
$('.remodal').scroll(function () {
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
});
Updated fiddle

I need to create a jquery based UI, in which I will have the below html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
div .content
{
border: 2px solid black;
background-color: White;
}
div.content::-webkit-scrollbar{
display:none;
}
#container::-webkit-scrollbar{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btnPopup">
Show Popup</button>
<div id="container" style="display: none; border: 2px solid green; background-color: Blue;">
<h3>
DISTRIBUTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this: Using jQuery UI Resizable I'm trying to
prevent resizing based on various rules. The built-in containment feature doesn't
seem to work properly with absolutely positioned elements, and I would need something
more flexible than that anyway. Having something like this: Using jQuery UI Resizable
I'm trying to prevent resizing based on various rules. The built-in containment
feature doesn't seem to work properly with absolutely positioned elements, and I
would need something more flexible than that anyway. Having something like this:
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this: Using jQuery UI Resizable I'm trying to prevent resizing based on various
rules. The built-in containment feature doesn't seem to work properly with absolutely
positioned elements, and I would need something more flexible than that anyway.
Having something like this: Using jQuery UI Resizable I'm trying to prevent resizing
based on various rules. The built-in containment feature doesn't seem to work properly
with absolutely positioned elements, and I would need something more flexible than
that anyway. Having something like this:
</p>
</div>
<h3>
EXCEPTION</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
ERROR</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
<h3>
MY NOTES</h3>
<div class="content">
<p>
Using jQuery UI Resizable I'm trying to prevent resizing based on various rules.
The built-in containment feature doesn't seem to work properly with absolutely positioned
elements, and I would need something more flexible than that anyway. Having something
like this:</p>
</div>
</div>
</body>
<script type="text/javascript">
$("#container").accordion({
collapsible: true,
heightStyle: "content",
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; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
// $(this).text('scrolling up !');
}
else {
// if ($('div.content').hasScrollBar()) {
// if ($('div.content').scrollTop() == ($('div.content p').height() - $('div.content').height())) {
// alert('end!');
// }
// }
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click()
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
</script>
</html>
The above html displays an accordion.
What I need to do us have a single scrollbar for the entire accordion content which will work like follows:
When 1st div scrolling is reached till end, second div will open up, on completion of second div scroll(if no scroll is present then too the same thing will happen), 3rd div will open up.
Now, this goes with scrolling downwards, the same should work when user scrolls upwards.
Please let me know the solution which has to be applied to implement the above type of functionality.

$("#container").accordion({
collapsible: true,
heightStyle: "content",
beforeActivate: function (event, ui) {
// The accordion believes a panel is being opened
var currHeader ;
var currContent;
if (ui.newHeader[0]) {
currHeader = ui.newHeader;
currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
currHeader = ui.oldHeader;
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; // Cancel the default action
}
});
$(document).ready(function () {
$(".content").css('max-height', $("#container").height() - 150);
});
$(document).delegate("#btnPopup", "click", function () {
$("#container").dialog({
title: "jQuery Modal Dialog Popup",
resizable: false,
width: 800,
maxHeight: 800
//minHeight: 250,
//minWidth: 500,
//resize: function (event, ui) {
// $(".content").css('max-height', ($("#container").height() - 250));
//}
});
return false;
});
// $(document).bind('wheel mousewheel', function (e) {
//
// if (e.originalEvent.wheelDelta > 0) {
//
// }
// else {
// k = h = 0;
// $("div.content").each(function () {
// if ($(this).is(":focus")) {
// h = k;
// }
// k++;
// });
// if ($('.content')[h] != undefined && h != (k - 1)) {
// if ($('#container').children('div.content').eq(h).scrollTop() + $('#container').children('div.content').eq(h).innerHeight() >=
//$('.content')[h].scrollHeight) {
//
// if (!($('div.content').eq(h + 1).prev('h3').hasClass('ui-state-active'))) {
// var totalDiv = $('div.content').length;
// var h3Height = $('h3').height();
//
// $("#container").accordion({ active: h + 1 });
// var f = $('h3.ui-state-active').length;
// //if (f != 1) {
// $('div.content').each(function () {
// if ($(this).css('display') == 'block')
// $(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
// });
// $('div.content').eq(h + 1).focus();
//
// }
// }
// }
//
// }
// });
(function ($) {
$.fn.hasScrollBar = function () {
return this.get(0).scrollHeight > this.height();
};
})(jQuery);
// $(function () {
// $(".content").bind('scroll', function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// })
$('div.content').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta == 120) {
// $(this).text('scrolling up !');
//alert("up scrolling");
try{
var x=$(this).prev('h3');
var y=x.prev('div.content');
$('.content').attr('display', 'none');
$(this).prev('div.content').focus();
if ( $(this).innerHeight() >= $(this)[0].scrollHeight) {
y.prev('h3').click();
x.click();
}
x.prev('div.content').attr('display', 'block');
}catch(err){alert(err.message);}
}
else {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
//alert('end reached');
$(this).next('h3').click();
$(this).prev('h3').click();
// $(this).next('div.content').attr('display', 'block');
$(this).blur();
$(this).next('div.content').focus();
}
}
});
// $('.content').bind('mousewheel', function (e) {
// if ($('div.content').hasScrollBar()) {
// $(this).delegate(".content", "scroll", function () {
// if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
// //alert('end reached');
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
// }
// else {
// $(this).next('h3').click();
// $(this).next('div.content').focus();
// }
// });
$(document).delegate("h3", "click", function () {
var totalDiv = $('div.content').length;
var h3Height = $('h3').height();
var f = $('h3.ui-state-active').length;
// if (!($(this).hasClass('ui-state-active'))) {
if (f != 1) {
$('div.content').each(function () {
if ($(this).css('display') == 'block')
$(this).css('max-height', ((parseInt($('#container').css('max-height')) / f) - (h3Height * (totalDiv + 1))));
});
}
});
Here is the updated javascript which will also work when you scroll up i.e it will close the current pane and open the previous pane. Here is the working JSBIN demo http://jsbin.com/viwojelico/2/edit?html,js

Creating an accordion - on the slide - the elements underneath the element that is sliding seem to move down a px and then back up, creating a juddering effect.
$(document).ready(function() {
//Promos banners rotation and accordion
$(function(){
var $accordionList = $('.accordion').find('li');
var numberOfItems = $accordionList.length;
var currentItem = 0;
// Set first item to active
$accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {});
// Loops through promos
var infiniateLoop = setInterval(function() {
if(currentItem == numberOfItems - 1){
currentItem = 0;
}
else {
currentItem++;
}
// Remove active class, if is has it, and close content
$accordionList.parent().find('li.active').removeClass('active')
.find('.content').slideToggle(800, function() {
});
// Add active class and open content
$accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {
});
}, 4000 );
// Click to show promo
$accordionList.on('click', function () {
// Stop rotation
clearInterval(infiniateLoop);
var $accordionHead = $(this);
// Remove active class, if is has it, and close content
if($accordionHead.hasClass('active')) {
// Do nothing
}
else {
$accordionHead.parent().find('li.active').removeClass('active')
.find('.content').slideToggle(800, function() {
});
// Add active class and open content
$accordionHead.addClass('active').find('.content').slideToggle(800, function() {
});
};
});
});
});
Fiddle here demonstrating the problem
I've seen some suggestions that you fix the height of the content div - but the site is responsive so that won't work.

Ya, I've had this problem before to. My favorite fix is to just make my own .slideToggle()
div = $('div');
height = div.height();
width = div.width();
$('div').click( function() {
if ($(this).hasClass('hidden')) {
$(this).animate({height: "0", width: "0"}, 200).hide().addClass('hidden');
} else {
$(this).animate({height: height, width: width}, 200).show().removeClass('hidden');
}
});
You could even wrap it in a prototype function if you wanted to.