Hi,

I have a Quicktabs instance that shows all tabs closed by default, and I need to be able to toggle tab content by clicking their respective tabmenu links. In essence I need to close the currently open tab by clicking its tabmenu link.

This is purely a jquery request and hence the magic needs to happen in modules/quicktabs/js/quicktabs.js. My own limited skills got me pretty close, but for the life of me I cannot get it working.

Can we perhaps have a patch for this by some jquery wizard? Pretty please.

CommentFileSizeAuthor
#6 open-close-toggle-tab-1988170-6.patch1.47 KBk.minkov

Comments

irowboat’s picture

irowboat commented
Version: 7.x-3.x-dev » 7.x-3.4
Status: Active » Needs work

Actually, I got this working. If somebody stumbles here looking for a similar solution, please let me know and I'll try to provide a patch.

rubic’s picture

rubic commented

>irowboat

hello irowboat!! is it possible to show how u managed with this task?

irowboat’s picture

irowboat commented
Issue summary: View changes

Sorry, missed your message at the time! Anyways,, here's a small snippet for js/quicktabs.js that was used to replace the original function. It's not pretty but got the job done. ;)

(This is tested with 7.x-3.4, probably works with the current version but please test and let me know if not.)

Drupal.quicktabs.clickHandler = function(event) {
  var tab = event.data.tab;
  var element = this;
  var already_open = false; // flag for open or closed (any tab)
  var other_open = false;   // flag for the active tab being the one clicked or another one
  if ($(this).parents('li').hasClass('active')) { already_open = true; }

  // Set clicked tab to active.
  $(this).parents('li').siblings().removeClass('active');
  $(this).parents('li').addClass('active');

  if (already_open) {
  
    tab.container.children().slideUp(300).addClass('quicktabs-hide');
    $(this).parents('li').removeClass('active');
    
  } else {

    tab.container.children().not('.quicktabs-hide').filter(function() { other_open = true; });
    
    if (other_open) {
      tab.container.children().slideUp(300, function() {
        $(this).addClass('quicktabs-hide');
        
        if (tab.container.children().not('.quicktabs-hide').length == 0) {
          if (!tab.tabpage.hasClass("quicktabs-tabpage")) {
            tab = new Drupal.quicktabs.tab(element);
          }
          tab.tabpage.slideDown(300).removeClass('quicktabs-hide');
        }
      });
    } else {
      if (tab.container.children().not('.quicktabs-hide').length == 0) {
        tab.tabpage.slideDown(300).removeClass('quicktabs-hide');
      }      
    }
  }
  
  // $(this).attr('style', function(i, style) { return style.replace(/display[^;]+;?/g, ''); });
  return false;
}
irowboat’s picture

irowboat commented
Status: Needs work » Closed (won't fix)
rubic’s picture

rubic commented

upppssss!!! missed your answer

thank you very much... :) will test it in some nearest projects
will let you know

k.minkov’s picture

k.minkov commented
StatusFileSize
new open-close-toggle-tab-1988170-6.patch1.47 KB

I tried the obove function against 3.6 version and didn't work very well. After you open a tab and then close it you cannot open it anymore. I created a patch (against 3.6) which is a little simpler and does the job right.

irowboat’s picture

irowboat commented

Thank you for the patch! The snippet above is ancient & overall bad (as are my JS skills), so obviously anybody coming here should go with k.minkov's patch. Cheers.

JohnnyW’s picture

JohnnyW commented

Thank you, k.minkov! #6 worked great! I also added a "X Close" tab with node > view mode "Full Content" [hide title of this node] and that too helps (as I placed tabs above posting).

J