Tabcordions

A responsive solution for tabs converting to accordion on mobile

by Florian Bar

HTML

<dl class="tabcordion">
    <dt><a href="#">Title</a></dt>
    <dd>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
    
    <dt><a href="#">Title</a></dt>
    <dd>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
</dl>

<dl class="tabcordion">
    <dt><a href="#">Title</a></dt>
    <dd>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
    
    <dt><a href="#">Title</a></dt>
    <dd>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
</dl>

CSS

.tabcordion dd { margin-left: 0; display: none; }

.tabcordion.is-tabs { position: relative; }
.tabcordion.is-tabs dt { display: inline-block; }
.tabcordion.is-tabs dd { 
    position: absolute;
    top: 20px; right: 0; left: 0;
}

JavaScript

;(function ($, window, undefined) {

    var pluginName = "tabcordion";

    $[pluginName] = function (element, options) {
        var self = this;
        var $element = $(element);
        var config = $.extend({}, $[pluginName].defaults, options);
        
        var winW;
        var currentLayout; // 'tabs' or 'accordion'
        
        init();

        function init() {
            prepareHtml();
           	bindEvents();
        }
        
        function prepareHtml() {
        	winW = $(window).width();
            
            if ( !$('dt.is-active', $element).length ) {
            	$('dt:first-child', $element)
                    .addClass('is-active')
                	.next('dd').show();
            }
       
            if (config.layout == 'auto') {
            	if (winW > 768) {
            		changeTo('tabs');
            	} else {
                	changeTo('accordion');
                }
            } 
            else {
                if (config.layout == 'tabs') {
                	changeTo('tabs');
                } else {
                    changeTo('accordion');
                }
            }
        }
        
        function changeTo(layout) {
            if (currentLayout != layout) {
                if (layout == 'tabs') {
                    $element
                    	.removeClass('is-accordion')
                        .addClass('is-tabs');
                    
                    currentLayout = 'tabs';
                } 
                else {
                    $element
                    	.removeClass('is-tabs')
                        .addClass('is-accordion');
                    
                    currentLayout = 'accordion';
                }
            }
        }
        
        function bindEvents() {
        	$(window).resize(function () {
                prepareHtml();
            });
            
            $element
            	.on('click', 'dt a', function () {
                	var $title =...