I wanted to style my tabs by only having one tab visible at a time, only showing the active tab being viewed. But I'm having an issue.

The tabs all have the classes a.slidetab, a.slidetab.active and the one that is active for real, (being shown currently on the page) gets a.slidetab.active.sidetab-active

So I thought if i make a.slidetab dislay:hidden, it would still show the one active tab being viewed but this was not the case. Then I though that if I applied display:hidden to a.slidetab.active, it would still only show the one current tab being viewed, but no.
In both cases all tabs disappear. I thought about adding my own class into the page tpl that i could use to hide unactive tabs but I'm unsure of how to add it around the code.....

Could you please give me some input?

Thanks,
Becky

Comments

Mark Theunissen’s picture

Mark Theunissen CreditAttribution: Mark Theunissen commented

I don't know why your classes are like that, mine seem to be the way that they should be:

The active slidetab has the class "slidetab-active". The others do not have this class, they are just "slidetab".

What you ideally need is a "slidetab-inactive" class, so you can hide all inactive ones. However the standard behaviour is hardcoded into the jquery, so probably not a good idea to go messing with it if you aren't exactly sure what you're doing... ;)

I would write some jQuery that hides all tabs that don't have the class "slidetab-active". jQuery provides a much more powerful selector engine than standard CSS. Here's what I'm talking about:

http://docs.jquery.com/Selectors/not#selector

So it would be something like: 

$('.slidetab:not(.slidetab-active)').hide();

Play around with that.

beckyjohnson’s picture

beckyjohnson CreditAttribution: beckyjohnson commented

So where would I put that snippit of code in my files?

Becky

Mark Theunissen’s picture

Mark Theunissen CreditAttribution: Mark Theunissen commented

Make a file in your theme directory (if it doesn't already exist) called script.js, and put the code in there!

Mark Theunissen’s picture

Mark Theunissen CreditAttribution: Mark Theunissen commented
Status: Active » Closed (fixed)