Very quickly converts a list (<ul>) to a set of tabs (using <h6> tags within the list items as tab controls), really simple...
My demo pages use this (the tabs below are the demo). These are great for SEO as the content renders prior to being shifted into tabs.
$('.list-to-tabs').listtoTabs();
<ul class="list-to-tabs"> <li> <h6>Tab Link 1</h6> <p>The tab content</p> </li> <li> <h6>Tab Link 2</h6> <p>The tab content</p> </li> </ul>
ul.list-to-tabs { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; } ul.list-to-tabs li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } ul.list-to-tabs li h6 { font-size: 18px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .list-to-tabs-trigger { display: inline-block; background-color: #90708C; color: #fff; text-decoration: none; padding: 2px 10px 2px 10px; margin-right: 10px; -webkit-box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.75); -moz-box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.75); box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.75); } .list-to-tabs-trigger.active { background-color: #666; }
/*! ListToTabs for JQuery v1.00 BETA * http://www.davidjohnfarmer.co.uk/jquery-plugins/listtotabs/ * Do not remove any of this notice (you're welcome to use this code in commercial projects) * Copyright (c) 2016 David John Farmer www.davidjohnfarmer.co.uk * Licensed under the MIT license */ (function ( $ ) { var tabset = 0; $.fn.listtoTabs = function(options) { // DEFAULT OPTIONS var settings = $.extend({ }, options ); var $this = $(this); $(document).on("click", ".list-to-tabs-trigger", function(event) { event.preventDefault(); $(this).parent().parent().find('li.list-to-tabs-list-item').hide(); $(this).parent().find('.list-to-tabs-trigger').removeClass('active'); var tabid = $(this).attr('href'); $(tabid).show(); $(this).addClass('active'); }); var addLabels = function(obj,tabset) { var itemid = 0; var tabcontrolshtml = ""; $(obj).children('li').each(function(i,listobj) { var label = $(listobj).find('h6').html(); $(listobj).find('h6').hide(); var linkclass = 'listtotabs-'+tabset+'-li-'+itemid; $(listobj).addClass('list-to-tabs-list-item'); $(listobj).attr('id',linkclass); $(listobj).hide(); tabcontrolshtml += "<a href='#"+linkclass+"' class='list-to-tabs-trigger'>"+label+"</a>"; itemid++; }); return tabcontrolshtml; } return this.each(function(i,obj) { tabset++; var tabcontrolshtml = addLabels(obj,tabset); $(obj).wrap("<div class='list-to-tabs-wrap'></div>"); $('<div>'+tabcontrolshtml+'</div>').insertBefore(obj); $(obj).parent().find('.list-to-tabs-trigger:first').trigger('click'); }); }; }( jQuery ));