Responsive Tabs to Accordion

After many arguments with my work colleague on how I must create (yet another) jQuery plugin that integrates both my Magic Tabs & Magic Accordion plugins and reacts between the two responsively, I've decided to ignore him completely and add a snippet of code to implement the desired effect.

Simply start with your lowest break points at the beginning of the switch statement and everything should be fine. Enjoy!


$('.content').magicTabs().magicAccordion();
var contentData = $('.content').data();
function resize() {
	var width = $(window).width();
	switch( true ) {
		case ( width <= 850 ) :
			contentData.magicTabs.object().tabs.hide();
			contentData.magicAccordion.object().accordion.show();
		break;
		default :
			contentData.magicTabs.object().tabs.show();
			contentData.magicAccordion.object().accordion.hide();
		break;
	}
}
$(window).resize( resize );
resize();

Demo

Resize your browser window down and you should see the desired effect.

And yet another...

Curabitur blandit tempus ardua ridiculus sed magna. Inmensae subtilitatis, obscuris et malesuada fames. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Unam incolunt Belgae, aliam Aquitani, tertiam. Pellentesque habitant morbi tristique senectus et netus. Qui ipsorum lingua Celtae, nostra Galli appellantur.

Some amazing header

Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Cum sociis natoque penatibus et magnis dis parturient. Unam incolunt Belgae, aliam Aquitani, tertiam. Hi omnes lingua, institutis, legibus inter se differunt.

list item 1
list item 2
list item 3

Curabitur blandit tempus ardua ridiculus sed magna. Quam diu etiam furor iste tuus nos eludet? Curabitur est gravida et libero vitae dictum. Qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Curabitur blandit tempus ardua ridiculus sed magna.

Hi omnes lingua, institutis, legibus inter se differunt. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Curabitur blandit tempus ardua ridiculus sed magna. Salutantibus vitae elit libero, a pharetra augue.