Making Tabs into Accordians on Mobile

I can't remember where I first saw this, but I do remember thinking: "That's genius!", as I had been struggling to find a nice way of showing tabbed content on the small screen whilst having the tab button and the content seperated by so much. 

This is related to the other concept that I love, which is to scroll the user to the content linked to the tab/accordian that they just clicked on. It works beautifully with this solution, so that tabbed content can be aligned to allow maximum screen height, which always feels best when there is imagery or long text. With accordians on mobile, the small screen means that it is also ideal for the website to use as much of the screen as possible when the user is viewing specific content. 

Check out the "Scroll to Content" solution here.

// MOBILE ONLY
if ($(window).width() < 768) {
	// TOGGLE VERTICAL TABS TO ACCORDIAN
	$('makeAccordian a').each(function() {
		var thisID =  $( this ).attr( "href"); // Each element
		var dp = "#"+$(this).parent().attr("id"); // Tabbed Content ID - Useful if there are multiple Tabbed Content sections
		$(this).addClass("collapsed").removeClass('active').attr({ "data-toggle":"collapse","data-target":thisID,href:""})
		$(this).after($(thisID).attr({"class":"collapse","data-parent":dp}))
		$(this).parent().removeClass('nav-justified');
	});
	// DELETE EMPTY ELEMENTS WHICH ARE USED AS SPACERS BY CONTENT EDITORS - TSK TSK
	$('p,h1,h2,h3,h4,h5,h6').each(function() {if ($(this).text().trim().length == 0) {$(this).remove()}});
}