Add tab title as class to each tab

similar issue #625972: Include <span> tags into quicktabs link

but each tab link has special class
#quicktabs-42 li.qtab-0
#quicktabs-42 li.qtab-1
#quicktabs-42 li.qtab-2

and each tab content has special id
#quicktabs_tabpage_42_0
#quicktabs_tabpage_42_1
#quicktabs_tabpage_42_2

(where 42 is the quicktab id)

subscribing

it is not special at all. it is quicktab id and tab id. if you create the quicktab programatically (#332895: render quicktab programatically), you can use any id you like..
if you don't like it you need to override the theme function..

This ability could be part of the basic functionality (or could be implemented in custom module) when QT will support style plugins, but it will be implemented in the D7 version first.

Hi,

I have built an image map out of QT module http://www.workforcefreedom.com/ - USA MAP

Now, it would be a little easier if we can just type in a class for each li tab or the title will automatically be added to the li class, like li.qtab-new-york and not li.qtab-32.

This way even if we move the tabs in any order, delete or add tabs, we don't have to revise the styles.

Thank you so much!

Hey guys, here's a patch against the current 7.x-3.x-dev that gives the quicktabs li elements a class that matches their title.

For example, a tab with title "Featured Stories" might like like:
<li class="featured-stories">...</li>

If you examine the patch, you might notice that you could also very easily override the theme hook - theme_qt_quicktabs_tabset to provide this functionality without having to patch the module, but I think this is a useful piece of functionality that would be nice to have committed.

I'm not sure what 6.x looks like since 7.x is making use of render-able arrays, and you also have the handy drupal_html_class() function, but I'd imagine there's a similar entry point in a theme hook.

Just applied the patch in #6 which beautifully saved me from having to mess around with custom templates. Much easier to target individual tabs with javascript and css now. Thank you justindodge.

Thanks justindodge, we've been using your patch for almost every project lately.

The attached patch does the same for the ui_tabs processor.

I created a similar issue and proposed a different approach for assigning classes based on the tab content ids. Please see if it can be useful. I use it already in one of my projects.

Here is a patch to add classes to quiktabs link. But instead of using tabs title, i prefer use tabs content description.
Please have a look, it may be improved..

New version to show view display name and arguments in button classes..

Thanks justindodge #6 it saved me :).

This issue supports adding the tab title as a class for only the ui_tab and the standard quicktabs plugins thanks to #6 and #9. However, a newer issue #2640174: Add tab title as class to standard quicktabs, accordion, and ui_tabs supports adding the tab title for only ui_tab and accordion.

In order to consolidate both issues, I have added a patch to the other issue that adds standard quicktabs support thanks to #6. With that patch, all plugin styles will be supported.

Marking this issue as a duplicate. Please review the other patch. Any alterations/suggestions welcome.

@OwilliwO: Your patches don't seem to fit the criteria of either issue, since both issues are specifically regarding adding the tab title as the class. Instead your patch goes in a different direction. Would you perhaps create a new issue, so that both use-cases could be supported in the future?