Hello,

 

I am having a bit of trouble getting an accordion menu to work. Basically, I would like a 4 column layout which then becomes an accordion menu when the browser is resized to less than 600px. It ALMOST works, for example if you visit the size when your browser is less than 600px already, then it works.

 

However if you start at desktop size then resize the browser down to below 600px and try and click on the headers, it doesn't work for some reason. Not getting any errors, just not working (content areas don't expand).

 

I've made a quick demo of what I am trying to do, and it should be fairly simple, I just can't get it to work (lack of sleep probably doesn't help)!

 

Link to demo

 

Thanks in advance for any help

 

James

Edited January 6, 201412 yr by wickywills

The reason it doesn't work when you manually shrink your browser window down is because the jQuery doesn't dynamically respond to window widths - the functions you've declared in your script are concrete for that page load. So when you load the page, jQuery is told to show() the div, and when you shrink the window down, it's still being told to show(). Thus when you try to toggle the content, it's being told to show() something that's already occurred. That's why if you shrink the page below 600px and then refresh, it works, but if you keep the page over 600px width and refresh, it doesn't work.

 

jQuery isn't dynamic like CSS is. So, basically, don't worry about this, it's not an issue.

Edited January 7, 201412 yr by throzen

 

The reason it doesn't work when you manually shrink your browser window down is because the jQuery doesn't dynamically respond to window widths - the functions you've declared in your script are concrete for that page load. So when you load the page, jQuery is told to show() the div, and when you shrink the window down, it's still being told to show(). Thus when you try to toggle the content, it's being told to show() something that's already occurred. That's why if you shrink the page below 600px and then refresh, it works, but if you keep the page over 600px width and refresh, it doesn't work.

 

jQuery isn't dynamic like CSS is. So, basically, don't worry about this, it's not an issue.

Not sure I totally understand what you're saying. The functions in my script are not concrete in the way that you describe, and are being told to run on browser resize as well as load. And it is an issue due to mobile/tablet orientation. If you were start at a landscape then flip to a portrait layout (obviously depending on your device size), the tabs would not work - this is an important issue that needed to be solved.

 

Either way, it has been solved using the following:

 

$(function(){
		var winIsSmall;
		$(window).on('load resize', footerAccordion );

		function footerAccordion() {
		    winIsSmall = window.innerWidth < 601;
		    $('.col .mobslider').toggle(!winIsSmall);
		}

		$('.col').find('h2').click(function () {
		    if(winIsSmall){
		        $(this).parent().find('.mobslider').stop().slideToggle();
		    }
		});
	});

Updated original link to others can see.

Edited January 7, 201412 yr by wickywills