Change color of a conditionally rendered tab

  • 2
  • Question
  • Updated 3 years ago
  • Answered
Conditional rendering - so cool.  We have many tabs in a tab set.  Some tabs are rare so we can hide them, conditionally.  However, we don't want them to be unnoticed when they happen to show up.  Is there anyway to have the color of this tab be different from the rest? Blink? Spin? Flip? Bounce? Rotate?  Skuiddittle? Honestly, a different tab color would be enough.
Photo of Justin Schroeder

Justin Schroeder

  • 130 Points 100 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
A little bit of CSS trickery can get you there...

Add a CSS resource with this code that looks like this: 

.ui-tabs-nav .ui-state-default:nth-child(3)
{
background: red;
}

The "nth-child(n)" selector syntax allows you to specify the specific tab you want to style.  I chose the third tab.  The cool thing is that conditional rendering simply hides an existing tab, so the count will stay the same regardless of whether the tab is shown or hidden (or prior tabs show or hide). 



I've done a very simple styling, but you can go to town.  I know that "Blink" has been deprecated - and I don't thing many browsers support the Skuiddittle css tag.  ( But we should totally push for that....)   Go to town. 

If you have more than one tabset in your page you will also want to add a specific class to that tabset so that this selector does not affect all the tabsets on the page. 

Cool! 
Photo of Justin Schroeder

Justin Schroeder

  • 130 Points 100 badge 2x thumb
This is so great!  Simple idea with huge impact.  It's working well. Thank you.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Is there a way to apply this CSS only the first time the tab shows up?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I haven't tested this, so it may not work.  You can now associate a unique id with a single tab. This ID could be what was bound to the CSS.  Then you could write some code that detected a click action on the tab and changed the unique id then.  With a different ID the custom CSS would no longer be applied.

Just a crazy idea..