I want navigations buttons in quick tabs.
I m using quick tabs programmatic and i want to limit the no. of tabs display on page to 4.
Like in this website. http://www.startour.dk/bestil-rejse/SearchResult.aspx?q=07b4fd46d5a24454...
I have more than 4 tabs created programmatic but i want only 4 to be displayed and others can be viewed by click next and previous buttons.
I m really stuck and searched from all sites.

Comments

pasqualle’s picture

there is no such functionality in QT. It would need some modification (or additional javascript) to achieve what you need.

similar (but not duplicate) issues:
#348724: buttons for the next and previous tab
#351008: Style improvements
#361114: Theme functions or template files

ali asif’s picture

Thanks a lot for quick reply.
But I m new bie can u help me further.

pasqualle’s picture

sorry, do not have the time to provide any code for this feature now.

you need to understand the QT output (for the tab titles), and modify it in php or javascript. The custom js seems a better solution for me, as you can probably do it without any modification of the QT module itself..

tommeir’s picture

my quick fix for this:

override theme function:

function genesis_quicktabs($quicktabs) {
  
  return '<div class="tabs-previous">previous</div>' . quicktabs_render($quicktabs) . '<div class="tabs-next">next</div>';
  //return quicktabs_render($quicktabs);
}

add js: (i used js injector to add this script only on my quicktab page)

jQuery.fn.exists = function(){return jQuery(this).length>0;}

$(document).ready(function() {
  
  $(".tabs-next:not(.tabs-next .inactive)").click( function() {
    if ($('.quicktabs_tabpage:not(.quicktabs-hide)').next(".quicktabs_tabpage").exists()) {
      $('.quicktabs_tabpage:not(.quicktabs-hide)').addClass('quicktabs-hide').next(".quicktabs_tabpage").removeClass('quicktabs-hide');
      $('.quicktabs_tabs li.active').removeClass('active').next().addClass('active');
    }
  });

  $(".tabs-previous").click( function() {
    if ($('.quicktabs_tabpage:not(.quicktabs-hide)').prev(".quicktabs_tabpage").exists()) {
      $('.quicktabs_tabpage:not(.quicktabs-hide)').addClass('quicktabs-hide').prev(".quicktabs_tabpage").removeClass('quicktabs-hide');
      $('.quicktabs_tabs li.active').removeClass('active').prev().addClass('active');
    }
  });

});

this does work for my case. (and with views). but it is far from a complete solution for this.

netw3rker’s picture

Issue summary: View changes
Status: Active » Closed (fixed)