Posted by soltis on Thu, Oct 21, 2021 - 11:37pm --- Updated: Oct 22 '21 - 2:30am

Is anyone working on Quick Tabs?  I can create a block of tabs that display different types of content in each tab using views in various modes but they all reload the entire page.  If I  scroll down to the top of the tabs and click on a tab, I would like to avoid the jump back to the top of the page.  I used Views Slideshow display with a pager of title fields to get this to work for another application, but it's limited to the same content type in each of the tabs.  Is there a module or module combo that essentially replaces Quick Tabs?

Comments

Olafski's picture

Fri, Oct 22, 2021 - 2:43am by Olafski

I don't know of a direct replacement for Quick Tabs. How to simulate its functionality depends on the use-case. E.g. for content items (nodes), Field Group comes to mind. What do you want to display in tabs?

Fri, Oct 22, 2021 - 6:49pm by soltis

Each tab will have several unrelated Views blocks, some with contextual filters (by the page URL).  The Views blocks across tabs will also be unrelated.

for example - tab1:

 

Tab2

indigoxela's picture

Wed, Oct 27, 2021 - 11:33pm by indigoxela

Hi soltis,

maybe this might work for you:

5 views blocks, all have similar markup in "Header" - a list of links. Only different in which link has the "active" css class.

This requires some custom styling and js - Javascript is needed to hide the inactive blocks and show the active one.

Or maybe try something completely different with Views Accordion?

Or request the port of Quick Tabs? Seems like nobody has done that so far.

Another idea: stick with views, but use pages instead of blocks. All with a similar Header (except for the active link). That way you wouldn't need custom js, as only the active page is visible.

The latter would be the first thing I'd personally try.

Thu, Oct 28, 2021 - 10:43am by soltis

Thanks for the suggestions - I made a request for a port but I will also try views with pages, making one active.  I know about the javascript method, but I am trying hard to make this a module-based website.  Of course, if nothing else works and there's no port, javascript will be on the table.

Sat, Oct 30, 2021 - 4:44pm by soltis

Views using pages does not work since each tab, attachment or page has a different url and there's a page load when different tabs are selected.

However, there is a module-based work around - i.e. Slow Tabs!

I have it working using Views Slide Show and by creating a new content type called "Tab" that includes the Title field (name of the tab) and a Views field using the Viewfield module.

This uses Slideshow's capability of updating the view without a page reload and using Viewfield to display multiple views within a view.

Details:

I selected "unlimited" values for the View field in the Tab content type.  Now many existing views can be selected for a specific tab.  What's great about this module is that you can also pass arguments, including tokens, and you add views by clicking an Add button.  This allows you to add as many views as needed and to define the order in which to display the views for each individual tab.

Block Reference is not as flexible, so this implementation is currently limited to Views blocks.  So I replaced some custom blocks with Views blocks.

For the tab View, I used Slideshow display and filtered on content type Tab.  Set the Views field to display. Set the "pager type" to Fields and set the "pager field" to Title.

I Configured the Slideshow settings, so that only one slide shows at a time and to pause until a control (Tab Title) is clicked on. 

No page jump - Quick Tabs successfully simulated...

Use a flexbox for the tabs/buttons and you are just about there...

Mon, Dec 16, 2024 - 4:03am by Enthusiast

QuickTabs is now available!!!
But does not work as expected, already reported (https://github.com/backdrop-contrib/quicktabs/issues/14).

Maybe an alternative solution using Views will help someone. If your content can be filtered using Exposed filters, I filter by Taxonomy Term, using Better Exposed Filters you can get an exposed filter as links, that look almost like Tabs. A little CSS and you're done, much faster than QuickTabs.