diff --git a/css/easyresponsivetables.css b/css/easyresponsivetables.css
new file mode 100644
index 0000000..206e5d4
--- /dev/null
+++ b/css/easyresponsivetables.css
@@ -0,0 +1,186 @@
+
+/* ---- */
+
+ul.resp-tabs-list {
+    margin: 0px;
+    padding: 0px;
+}
+
+.resp-tabs-list li {
+    font-weight: 600;
+    font-size: 13px;
+    display: inline-block;
+    padding: 13px 15px;
+    margin: 0;
+    list-style: none;
+    cursor: pointer;
+    float: left;
+}
+
+.resp-tabs-container {
+    padding: 0px;
+    background-color: #fff;
+    clear: left;
+}
+
+h2.resp-accordion {
+    cursor: pointer;
+    padding: 5px;
+    display: none;
+}
+
+.resp-tab-content {
+    display: none;
+    padding: 15px;
+}
+
+.resp-tab-active {
+    border: 1px solid #c1c1c1;
+    border-bottom: none;
+    margin-bottom: -1px !important;
+    padding: 12px 14px 14px 14px !important;
+}
+
+.resp-tab-active {
+    border-bottom: none;
+    background-color: #fff;
+}
+
+.resp-content-active, .resp-accordion-active {
+    display: block;
+}
+
+.resp-tab-content {
+    border: 1px solid #c1c1c1;
+}
+
+h2.resp-accordion {
+    font-size: 13px;
+    border: 1px solid #c1c1c1;
+    border-top: 0px solid #c1c1c1;
+    margin: 0px;
+    padding: 10px 15px;
+}
+
+h2.resp-tab-active {
+    border-bottom: 0px solid #c1c1c1 !important;
+    margin-bottom: 0px !important;
+    padding: 10px 15px !important;
+}
+
+h2.resp-tab-title:last-child {
+    border-bottom: 12px solid #c1c1c1 !important;
+    background: blue;
+}
+/*-----------Vertical tabs-----------*/
+.resp-vtabs ul.resp-tabs-list {
+    float: left;
+    width: 30%;
+}
+
+.resp-vtabs .resp-tabs-list li {
+    display: block;
+    padding: 15px 15px !important;
+    margin: 0;
+    cursor: pointer;
+    float: none;
+}
+
+.resp-vtabs .resp-tabs-container {
+    padding: 0px;
+    background-color: #fff;
+    border: 1px solid #c1c1c1;
+    float: left;
+    width: 68%;
+    min-height: 250px;
+    border-radius: 4px;
+    clear: none;
+}
+
+.resp-vtabs .resp-tab-content {
+    border: none;
+}
+
+.resp-vtabs li.resp-tab-active {
+    border: 1px solid #c1c1c1;
+    border-right: none;
+    background-color: #fff;
+    position: relative;
+    z-index: 1;
+    margin-right: -1px !important;
+    padding: 14px 15px 15px 14px !important;
+}
+
+.resp-arrow {
+    width: 0;
+    height: 0;
+    float: right;
+    margin-top: 3px;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 12px solid #c1c1c1;
+}
+
+h2.resp-tab-active span.resp-arrow {
+    border: none;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 12px solid #9B9797;
+}
+
+/*-----------Accordion styles-----------*/
+h2.resp-tab-active {
+    background: #DBDBDB !important;
+}
+.resp-easy-accordion  h2.resp-accordion {
+    display: block;
+}
+.resp-easy-accordion .resp-tab-content {
+    border: 1px solid #c1c1c1;
+}
+
+.resp-easy-accordion .resp-tab-content:last-child {
+    border-bottom: 1px solid #c1c1c1 !important;
+}
+
+.resp-jfit {
+    width: 100%;
+    margin: 0px;
+}
+
+.resp-tab-content-active {
+    display: block;
+}
+
+h2.resp-accordion:first-child {
+    border-top: 1px solid #c1c1c1 !important;
+}
+
+/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
+@media only screen and (max-width: 768px) {
+    ul.resp-tabs-list {
+        display: none;
+    }
+
+    h2.resp-accordion {
+        display: block;
+    }
+
+    .resp-vtabs .resp-tab-content {
+        border: 1px solid #C1C1C1;
+    }
+
+    .resp-vtabs .resp-tabs-container {
+        border: none;
+        float: none;
+        width: 100%;
+        min-height: initial;
+        clear: none;
+    }
+    .resp-accordion-closed {
+        display:none !important;
+    }
+    .resp-vtabs .resp-tab-content:last-child {
+        border-bottom: 1px solid #c1c1c1 !important;
+    }
+}
diff --git a/js/qt_easyresponsivetabs.js b/js/qt_easyresponsivetabs.js
new file mode 100644
index 0000000..f11b60f
--- /dev/null
+++ b/js/qt_easyresponsivetabs.js
@@ -0,0 +1,180 @@
+// Easy Responsive Tabs Plugin
+// Author: Samson.Onna <Email : samson3d@gmail.com>
+(function ($) {
+    $.fn.extend({
+        easyResponsiveTabs: function (options) {
+            //Set the default values, use comma to separate the settings, example:
+            var defaults = {
+                type: 'default', //default, vertical, accordion;
+                width: 'auto',
+                fit: true,
+                closed: false,
+                activate: function(){}
+            }
+            //Variables
+            var options = $.extend(defaults, options);            
+            var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
+            var hash = window.location.hash;
+            var historyApi = !!(window.history && history.replaceState);
+            
+            //Events
+            $(this).bind('tabactivate', function(e, currentTab) {
+                if(typeof options.activate === 'function') {
+                    options.activate.call(currentTab, e)
+                }
+            });
+
+            //Main function
+            this.each(function () {
+                var $respTabs = $(this);
+                var $respTabsList = $respTabs.find('ul.resp-tabs-list');
+                var respTabsId = $respTabs.attr('id');
+                $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
+                $respTabs.css({
+                    'display': 'block',
+                    'width': jwidth
+                });
+
+                $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
+                jtab_options();
+                //Properties Function
+                function jtab_options() {
+                    if (jtype == vtabs) {
+                        $respTabs.addClass('resp-vtabs');
+                    }
+                    if (jfit == true) {
+                        $respTabs.css({ width: '100%', margin: '0px' });
+                    }
+                    if (jtype == accord) {
+                        $respTabs.addClass('resp-easy-accordion');
+                        $respTabs.find('.resp-tabs-list').css('display', 'none');
+                    }
+                }
+
+                //Assigning the h2 markup to accordion title
+                var $tabItemh2;
+                $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
+
+                var itemCount = 0;
+                $respTabs.find('.resp-accordion').each(function () {
+                    $tabItemh2 = $(this);
+                    var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')');
+                    var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')');
+                    $accItem.append($tabItem.html());
+                    $accItem.data($tabItem.data());
+                    $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
+                    itemCount++;
+                });
+
+                //Assigning the 'aria-controls' to Tab items
+                var count = 0,
+                    $tabContent;
+                $respTabs.find('.resp-tab-item').each(function () {
+                    $tabItem = $(this);
+                    $tabItem.attr('aria-controls', 'tab_item-' + (count));
+                    $tabItem.attr('role', 'tab');
+
+                    //Assigning the 'aria-labelledby' attr to tab-content
+                    var tabcount = 0;
+                    $respTabs.find('.resp-tab-content').each(function () {
+                        $tabContent = $(this);
+                        $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
+                        tabcount++;
+                    });
+                    count++;
+                });
+                
+                // Show correct content area
+                var tabNum = 0;
+                if(hash!='') {
+                    var matches = hash.match(new RegExp(respTabsId+"([0-9]+)"));
+                    if (matches!==null && matches.length===2) {
+                        tabNum = parseInt(matches[1],10)-1;
+                        if (tabNum > count) {
+                            tabNum = 0;
+                        }
+                    }
+                }
+
+                //Active correct tab
+                $($respTabs.find('.resp-tab-item')[tabNum]).addClass('resp-tab-active');
+
+                //keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode
+                if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {                  
+                    $($respTabs.find('.resp-accordion')[tabNum]).addClass('resp-tab-active');
+                    $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active').attr('style', 'display:block');
+                }
+                //assign proper classes for when tabs mode is activated before making a selection in accordion mode
+                else {
+                    $($respTabs.find('.resp-tab-content')[tabNum]).addClass('resp-tab-content-active resp-accordion-closed')
+                }
+
+                //Tab Click action function
+                $respTabs.find("[role=tab]").each(function () {
+                   
+                    var $currentTab = $(this);
+                    $currentTab.click(function () {
+                        
+                        var $currentTab = $(this);
+                        var $tabAria = $currentTab.attr('aria-controls');
+
+                        if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
+                            $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
+                            $currentTab.removeClass('resp-tab-active');
+                            return false;
+                        }
+                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
+                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
+                            $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
+                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
+
+                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
+                        } else {
+                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
+                            $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
+                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
+                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
+                        }
+                        //Trigger tab activation event
+                        $currentTab.trigger('tabactivate', $currentTab);
+                        
+                        //Update Browser History
+                        if(historyApi) {
+                            var currentHash = window.location.hash;
+                            var newHash = respTabsId+(parseInt($tabAria.substring(9),10)+1).toString();
+                            if (currentHash!="") {
+                                var re = new RegExp(respTabsId+"[0-9]+");
+                                if (currentHash.match(re)!=null) {                                    
+                                    newHash = currentHash.replace(re,newHash);
+                                }
+                                else {
+                                    newHash = currentHash+"|"+newHash;
+                                }
+                            }
+                            else {
+                                newHash = '#'+newHash;
+                            }
+                            
+                            history.replaceState(null,null,newHash);
+                        }
+                    });
+                    
+                });
+                
+                //Window resize function                   
+                $(window).resize(function () {
+                    $respTabs.find('.resp-accordion-closed').removeAttr('style');
+                });
+            });
+        }
+    });
+
+    Drupal.behaviors.qt_responsive = {
+        attach: function (context, settings) {
+            $('.quick-responsive', context).once(function(){
+                $(this).easyResponsiveTabs();
+            });
+        }
+    }
+})(jQuery);
+
diff --git a/plugins/QuickResponsive.inc b/plugins/QuickResponsive.inc
new file mode 100644
index 0000000..83505c9
--- /dev/null
+++ b/plugins/QuickResponsive.inc
@@ -0,0 +1,94 @@
+<?php
+
+/**
+ * Renders the content using the jQuery UI Accordion widget.
+ */
+class QuickResponsive extends QuickRenderer {
+
+  public static function optionsForm($qt) {
+    $form = array();
+    /*
+    $form['history'] = array(
+      '#type' => 'checkbox',
+      '#title' => 'History',
+      '#description' => t('Store tab state in the URL allowing for browser back / forward and bookmarks.'),
+      '#default_value' => (isset($qt->renderer) && $qt->renderer == 'accordion' && isset($qt->options['history']) && $qt->options['history']),
+    );
+    $form['jquery_ui'] = array(
+      '#type' => 'fieldset',
+      '#title' => t('JQuery UI options'),
+    );
+    $form['jquery_ui']['autoHeight'] = array(
+      '#type' => 'checkbox',
+      '#title' => 'Autoheight',
+      '#default_value' => (isset($qt->renderer) && $qt->renderer == 'accordion' && isset($qt->options['jquery_ui']['autoHeight']) && $qt->options['jquery_ui']['autoHeight']),
+    );
+    $form['jquery_ui']['collapsible'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Collapsible'),
+      '#default_value' => (isset($qt->renderer) && $qt->renderer == 'accordion' && isset($qt->options['jquery_ui']['collapsible']) && $qt->options['jquery_ui']['collapsible']),
+    );
+    */
+    return $form;
+  }
+
+  public function render() {
+    $quickset = $this->quickset;
+    $qsid = 'quickset-' . $quickset->getName();
+    // Build our render array...
+    $render_array = array();
+    $render_array['#attached'] = $this->add_attached();
+    $render_array['content'] = array(
+      '#theme' => 'qt_responsive',
+      '#options' => array('attributes' => array(
+        'id' => $qsid,
+        'class' => array('quick-responsive'),
+      )),
+      'titles' => array(),
+      'tabcontent' => array(),
+    );
+
+    // Render all tab content.
+    foreach ($quickset->getContents() as $key => $item) {
+      if (!empty($item)) {
+
+        $render_array['content']['titles'][] = check_plain($quickset->translateString($item->getTitle())) ;
+        $render_array['content']['tabcontent'][] = $item->render();
+      }
+    }
+    drupal_add_css(drupal_get_path('module', 'quicktabs') . '/css/easyresponsivetables.css');
+    return $render_array;
+  }
+
+  /**
+   * Add any necessary js, css and libraries for the render array.
+   */
+  protected function add_attached() {
+    $settings = $this->quickset->getSettings();
+    $options = $settings['options'];
+
+    $attached = array(
+      'js' => array(
+        array('data' => drupal_get_path('module', 'quicktabs') . '/js/qt_easyresponsivetabs.js'),
+      ),
+    );
+
+    $javascript = drupal_add_js();
+    if (isset($javascript['settings']['data'])) {
+      foreach ($javascript['settings']['data'] as $key => $settings) {
+        if (key($settings) == 'quicktabs') {
+          $qtkey = $key;
+          break;
+        }
+      }
+    }
+
+    $name = $this->quickset->getName();
+//    if (!isset($qtkey) || !array_key_exists('qt_' . $name, $javascript['settings']['data'][$qtkey]['quicktabs'])) {
+//      $quicktabs_array = array('name' => $name, 'active_tab' => $this->quickset->getActiveTab(), 'options' => $options['jquery_ui'], 'history' => $options['history']);
+//      $attached['js'][] = array('data' => array('quicktabs' => array('qt_'. $name => $quicktabs_array)), 'type' => 'setting');
+//    }
+    return $attached;
+  }
+
+}
diff --git a/quicktabs.module b/quicktabs.module
index 182a89c..78de8ff 100644
--- a/quicktabs.module
+++ b/quicktabs.module
@@ -122,6 +122,9 @@ function quicktabs_theme() {
     'qt_accordion' => array(
       'render element' => 'element',
     ),
+    'qt_responsive' => array(
+      'render element' => 'element',
+    ),
     'quicktabs_tab_access_denied' => array(
       'variables' => array('tab'),
     ),
@@ -458,6 +461,13 @@ function quicktabs_quicktabs_renderers() {
       'class' => 'QuickAccordion',
     ),
   );
+  $info['responsive'] = array(
+    'path' => $path,
+    'handler' => array(
+      'file' => 'QuickResponsive.inc',
+      'class' => 'QuickResponsive',
+    ),
+  );
   return $info;
 }
 
@@ -681,3 +691,26 @@ function theme_qt_accordion($variables) {
   $output .= '</div>';
   return $output;
 }
+
+/**
+ * Theme function to output markup for the responsive style.
+ *
+ * @ingroup themeable
+ */
+function theme_qt_responsive($variables) {
+  $element = $variables['element'];
+  $output = '<div '. drupal_attributes($element['#options']['attributes']) .'>';
+
+  $output .= '<ul class="resp-tabs-list">';
+  foreach($element['titles'] as $title) {
+    $output .= sprintf('<li>%s</li>', $title);
+  }
+  $output .= '</ul>';
+
+  $output .= '<div class="resp-tabs-container">';
+  foreach($element['tabcontent'] as $tabcontent) {
+    $output .= drupal_render($tabcontent);
+  }
+  $output .= '</div></div>';
+  return $output;
+}