Display: None Question

[Alan Vende]

I have each staff group on the tabs of the box. At the moment, there are four tabs that have "nothing" in them, but that is because I used the display: none; CSS directive on those tabs.



Right now, they look bland with nothing in them, as you can probably see by the above screenshot. So, I wanted to put a message of some sort in their place saying something along the lines of, "We have no staff members for this position at the moment."

I do want to be able to style it with CSS, though, so I can put a border or something around it. I do, however, have a class in which I use with the display: none; directive, and that's staff-position-vacant, so I was thinking of using that as the condition: if a tab has that class, then display this message. (If it's possible to have it target HTML like that.)

To style it, though, I'm guessing I'm going to have to have another class specifically for the styling since that class is being used for the display: none; directive, correct? The class for that was going to be staff-position-vacant-msg, if you need that.

[Brian]

It's possible to target it based on class, but I'm not sure why you even need an if statement to do this when you can just add the message before or after the hidden content since you're manually populating each tab's contents in the HTML components anyway.

[Alan Vende]

Oh, true. I'd forgotten that I could do that. I hid the table with the class, so I could just put a <div></div> before or after it? I guess I just thought it would be better/easier to have it in one place (the JS component), rather than having it in multiple tabs within the HTML. But, I think having it in the tabs is easier than the JS since the JS would have to be changed each time positions become filled/there are vacancies, right?

I'm such an idiot. My brain always goes to the hardest solutions first. I just thought that I had to use JS--that that was the only option. 

Thanks for your help, Brian!