Quick Tabs to Responsive Accordion

Looking for the exact same solution myself.

I'm implementing the same thing on a site right now. The solution I've come up with, though not elegant, will work. I've created two quicktab instances. One with horizontal tabs and one with accordion tabs containing the same information. Then I defined my breaking points where one disappears and the other reappears.

I hope to find a different way in the future but because there is only one instance and once set up, I will only have to make content changes in one spot.

If anyone finds another solution, I'd be glad to hear it!

I've found that Quick Tabs javascript makes it hard to manipulate the tabs with custom JS. In my case, the client wanted the Quick Tabs turned into a select list on mobile. I found the easiest thing to do was just write a bit of Javascript to create the select list from the tabs themselves and then use media queries to show/hide the tabs or select list.

I'm sure you could use a similar method to create your accordion too. I made mine generalized to work for all quicktabs on the site, including multiple QT blocks per page. If you don't want that you might need more specific targeting.

Also, note that this is for a D6 site, but it's just targetting the relevant classes/IDs, which should be the same I think.

  /* Build the Quick Tabs Select list based on the text and IDs of
  * the tabs for each Quick Tab instance (.quicktabs_wrapper).
   */
  $.each($('.quicktabs_wrapper'), function(i) {
    // Create the dropdown base
    var wrapperId = '#' + $(this).attr('id');
    $("<select />").prependTo(wrapperId);
    $(wrapperId + ' select').attr('class', 'qt-mobile-select');

    var selectStr = Drupal.t('Select Category');
    $('<option value="" selected>' + selectStr + '</option>').appendTo(wrapperId + " select");

    // Populate dropdown based on tab links/text
    $(wrapperId + " a.qt_tab").each(function() {
     var el = $(this);
     var value = el.attr('id');
      /* we need to change the tab link ID to a tab content ID */
     value = value.replace('-tab-', '_tabpage_');
     value = value.replace('-', '_');
     var tabText = el.text();
     var optionStr = '<option value="' + value + '">' + tabText + '</option>';
     $(optionStr).appendTo(wrapperId + " select");
    });
    if ($(window).width() > 767) {
      $('qt-mobile-select').hide();
    }
  });
    // watch the select list for changes
  $(".quicktabs_wrapper select").change(function() {
      var parentId = '#' + $(this).parent().attr('id');
      var newTab = '#' + $(this).find("option:selected").val();
      $(parentId + ' .quicktabs_tabpage').addClass('quicktabs-hide');
      $(newTab).removeClass('quicktabs-hide');
  });
});
</script>

Hi ergophobe,

Am gonna try and implement your solution, as can't find a better alternative elsewhere. Have my quick tab with content all set up. Could you please advise where I would paste the above javascript, pls?

Hopefully, I will be able to figure out the media queries, too! lol

Thanks.

Where to paste it? Remember, this is Drupal 6 code, so unless you're on D6, you probably shouldn't paste it all (or plan on a fair bit of testing and debugging).

Anyway, you could put it anywhere, but options include

• put it in a preprocess function in template.php and add it to your page using drupal_add_js
• put it in a file and add it to pages using context add assets
• Drop it into the footer of your page (so page.tpl.php in D6)

Oops, blast, I didn't notice that. Hmm. Back to the drawing board!

>> drawing board

Not really -it's just based on markup. It may work fine in D7, I just haven't tried it.

If it doesn't work in D7, all you would have to do is change the selectors. For example, some naming conventions changed with D7, so you might have to adjust these lines

     value = value.replace('-tab-', '_tabpage_');
     value = value.replace('-', '_');

What about taking advantage of the "Easy Responsive Tabs to Accordion" jQuery plugin? How much of an effort might it be to incorporate this into the existing module?

http://webtrendset.com/demo/easy-responsive-tabs/Index.html

Hi - Here's a 1st cut at a patch of integrating the Easy Responsive Tabs library with quicktabs.

https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

Oops, here's the patch.

just marking as needs review since there's a patch for folks to test.

I applied this patch and I don't see any results - the tabs do not change when the screen is reduced in size. Is there anything else that needs to be done in order to get this to work?

.

I really need this too.

You may want to look at this too if it's different / easier to ingrate in any way: https://github.com/jellekralt/Responsive-Tabs

.

.

Has anyone found a solution to this?If so how?

I've applied the patch in #10 and it works as promised - thanks.

The patch adds a new renderer called Responsive. You need to go to each QuickTab instance and change the renderer if you want it to work. Each tab in the instance then turns into an accordion at the appropriate breakpoint (768px by default), which you can change by editing the easyresponsivetables.css file that gets created with the patch (it's clearly marked in line 160).

Above this point, the tabs render as normal, although I had to redo the CSS to make the tabs look the same as before - which came as no surprise, and was no problem to deal with.

The easyresponsive library is added the quicktabs/js folder when you apply the patch, so there is no need to add it to the libraries folder.

.

.

@pinkonomy I checked my site, and don't have the problem you describe in Chrome below 450px. I tried on an iPhone 6, by resizing the window in Chrome on Mac, and by using Chrome's tools for responsive development.

I'm not sure what the issue would be for you. I can't imagine the link is simply disappearing in Chrome on a small screen, but it could be underneath another element on the page, which could make it inaccessible.

I'd start with the Chrome responsive developer tools and look to see whether the link is there, and whether there are any javascript errors being thrown by Quicktabs (I doubt it, but just in case). I'd also try changing the CSS for the tabs to make them bigger and see if that helps. One point to note is you may need to use !important to override some of the default CSS provided by the patch, since the default CSS makes frequent use of !important.

In terms of the issue with 2 tabs, my guess this is also a CSS problem, but my site has three so I can't test it easily.

I found it working without issue.

I am generating dynamic tabs using views format as quicktabs.
Is there a chance of having this behavior with views generated quicktabs?

@bpadaria - if you mean that you want to use Views as your tab type for one or more tabs then yes - it will work. That's what my site is using.

Worked perfectly for me.
Big thank you @rich.yumul for the patch and @millionleaves for quick "documentation".

I have AJAX view, with better exposed filter available for users. After my table has been filtered, tab's switching do not hide filtered table. This problem don't occurs with quicktab style.

Was there a reason this patch was never added to quicktabs? I'm using Quicktabs version 7.x-3.6 and I tried patching it and it doesn't appear to add responsive to the renderer selection. Any suggestions?

It was marked as "Needs Review" 11 months ago and since that time there have been no commits to the project at all.

And most commits in the last couple of years have been bug fixes, not feature additions
https://www.drupal.org/node/214362/commits

The 7.x-3.6 branch is three years old. This patch is against the dev version. I would try patching against that.

I tried downloading the dev branch and patching against it and it still doesn't show the responsive renderer. The patch appears to have applied, and my version under modules now says: 7.x-3.6+9-dev (not sure if that's how the dev branch usually shows? or if something went wrong when I switched out the module).

One thing while patching, it did say when it tried to patch the quicktabs.module file that it couldn't find the file to patch. I told it to patch quicktabs.module and it did, but could this be the issue causing the error?

Here's the cygwin response:
$ patch -p0 < quicktags-easyresponsivetabs-1934290-9.patch
patching file b/css/easyresponsivetables.css
patching file b/js/qt_easyresponsivetabs.js
patching file b/plugins/QuickResponsive.inc
can't find file to patch at input line 483
Perhaps you used the wrong -p or --strip option?
The text leading up to this was:
--------------------------
|diff --git a/quicktabs.module b/quicktabs.module
|index 182a89c..78de8ff 100644
|--- a/quicktabs.module
|+++ b/quicktabs.module
--------------------------
File to patch: quicktabs.module
patching file quicktabs.module

So I don't know what was causing the issue, but after going through and trying it a few more times, and clearing the cache a few more times, I was able to get responsive to show up.

Thanks @rich.yumul for the great patch in #10. I've been using this on one of our sites and had to update to the latest quicktabs dev version so I fixed up the patch to apply to that, and also found a translation issue coming from QuickResponsive.inc so I fixed that up too.

None of these patches work with the latest dev version the latest version is 7.x-3.6+10-dev not sure what the +10 is

I applied the patch to the latest version and it doesn't work

I had to apply the quicktabs.module file manually because it broke at a line around 500. But even with that I can't get responsive option to appear in the select list.

The version number now in dev is 7.x-3.6+10-dev where do I find 7.x-3.6+9-dev
never seen + in the version number string before and no info here https://www.drupal.org/documentation/version-info/numbers

I managed to get it working just fine. As always, just clear your cache! It's even easier to style the new tabs. Great stuff, this needs to get committed.

Neither patch worked for me, so I created a JS file in my theme folder based on this code pen: https://codepen.io/kazmeyer/pen/lzqhf. Use jQuery to add clickable headings above each tab page as your accordion buttons. Show those headings and hide the ul tabs in mobile/tablet sizes.

Patch in #31 worked well for me on the current 7.x-3.6+10-dev.

Although as my theme renders nodes wrapped in an <article> tags I needed to add a wrapper <div> to the rendered content output by the theme_qt_responsive() function as below as there were a combo of different tags:

<?php
foreach($element['tabcontent'] as $tabcontent) {
    $output .= '<div class="resp-tab-content-wrapper">' . drupal_render($tabcontent) . '</div>';
}
?>

But all in all, thanks people! Works a treat.

For those using Bootstrap, a better alternative to this patch would be to use the Bootstrap Quicktabs module.

The patch in #31 applied cleanly to 7.x-3.6+10-dev, but no new renderer showed up. I cleaned cache, disabled and re-enabled the module, all in vain as nothing new shows up.

Ok, after thorough testing I had to come to the following conclusions. The patch in #31 kind of works, but:

1. The quicktabs styles module is totally side-kicked by the changes, so can be turned off.

2. I used the 'callback' tab type to get content of two custom pages and for some reason the first page got split into two and placed into tabs, while the second one totally got left out of tabs and is always rendered under the content area. Probably it has something with the fact the second page had table:

3. And why only horizontal tabs? What about vertical ones? Easy Responsive Tabs demo page on http://www.jqueryscript.net/demo/Easy-Responsive-Tab-Accordion-Control-P... shows it can equally deal with both horizontal and vertical tabs, so why limit its features?

Generally, the patch is too raw with lot's of issues listed and not ready for production.

Here is another patch that takes care of several important issues reported previously.

In particular, two new renderers are introduced for both horizontal and vertical tabs, hence the change of the issue subject. Also several new files have been added and some existing files are cleaned up and modified to make the changes work:

        new file:   css/responsive-tabs-horizontal.css
        new file:   css/responsive-tabs-vertical.css
        new file:   js/qt_easyresponsivetabs.js
        new file:   plugins/QuickHorizontalTabs.inc
        new file:   plugins/QuickVerticalTabs.inc
        modified:   plugins/QuickViewContent.inc
        modified:   quicktabs.module
        modified:   quicktabs_tabstyles/quicktabs_tabstyles.info

The patch should be applied against the last 7.x-3.x-dev version. The only thing that I wanted to do, but didn't have time is to make it to automatically turn off the "Quicktabs Styles" module if one of Horizontal or Vertical Responsive Tabs are selected, because EasyResponsiveTabs plugin uses its own style, therefore no need to apply another style.

I hope this will get committed to the module. And Happy New Year to Everybody!

Please ignore the patch in #41 as some extra lines in the submodule's info file slipped in. Here is the new version. Download it to the 7.x-3.x-dev version and run:

patch -p1 < quicktabs-to-responsive-accordion-1934290-42.patch

in the module's root directory.

Applied patch #42.
Via field collection display formatter (https://www.drupal.org/project/field_collection_tabs), I configured responsive horizontal tabs - successfully.
Thanks!

Configuration of the breakpoints should be easier to find - but wonderful so far

Patch on #42 works for me too via Quicktabs Instance. Great job!

One question, can quicktabs renderer be changed on views?

Hope to see this on D8 version too!

Any updates on the DP8 version of this? It looks sweet!

This patch works great for my use case! It didn't apply cleanly to dev though (1 line was rejected). See attached patch & the rej hunk.

Just adding a note that using this patch, you cannot set a default tab. This is an issue in the Easy Responsive Tabs Plugin code (https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/issues/88) and not related to the Quick Tabs module.

can't wait to this to be release!!!!

is it ever going to release and applied? Its been forever.

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue.

If still an issue or needed for 4.0.x (latest branch) feel free to reopen