Tabbed Content Not Working With Many Tabs

[chome4]

Followed a tutorial for a tabbed section to be put in a page. The original tutorial featured four tabs but I needed 9, which I added. The result is:

http://gmjones.org/tabs3.html

I know how to create two containers, one for the content and one for the tabs. But how can the existing CSS be adjusted to target a list of divs and have them slide or fade into view.

Thanks in advance.

(html/css file attached...)

[Beverleyh]

Followed a tutorial for a tabbed section to be put in a page

For reference, please provide a link to the tutorial that you followed.

But how can the existing CSS be adjusted to target a list of divs...

The markup provided *is* a series of divs - can you please clarify what divs you are referring to. (additional ones? existing ones?)

... and have them slide or fade into view

You can create a fade-in effect with CSS like this;

.content p { -webkit-animation:fadein 0.5s; animation:fadein 0.5s }
@-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
@keyframes fadein { from {opacity:0} to {opacity:1} }

[chome4]

The tutorial was from CSS-Tricks > http://css-tricks.com/functional-css-tabs-revisited/

What I meant by targetting divs was having them targetted when they were in a separate container away from the tabs/buttons. From the example, targetting the .content name is how it's done but I'm at a loss as to how to set up the separated tabs/buttons.

Sorry for any confusion...

[Beverleyh]

But what are you trying to target exactly? (The actual element). And in what circumstances - at the same time the checkboxes are checked? or just in general, for example if you are having issues with inheritance within the cascade? Unfortunately, you still aren't being very clear.

[chome4]

My web design experience is pretty limited, so I don't yet understand 'inheritance within the cascade'. What I want it to click a tab or button and have the corrsponding content come into view i.e. click on 'Solicitor' and text/images for 'Solicitor' appearing in the box.

[Beverleyh]

That appears to be exactly what you have - you would put your content into the div with the "content" class.

[chome4]

But the tabs aren't detached so they are clearly visible.

[Beverleyh]

Do you mean to say?

"Since I added more tabs, the ones on the top row are being overlapped by the tabs on the bottom row, and I want them to be clearly visible and separate? How do I edit the CSS to give them space?".

[chome4]

Exactly!

[Beverleyh]

And ultimately, are you working with a fixed-width layout or do you want the tabs to respond/adapt when the browser is narrowed?

That's the biggest issue at the moment. You could fix the width of the page and hard-code the CSS changes only to the tabs that need attention (if for example, "Gibraltar Panel Liquidator" were always to appear in the same position - 1st spot on row 2 - you can add extra CSS only to the 2nd row of tabs), but if you are working within a responsive layout, where you cant guarantee how the tabs will flow on to new lines/rows, that would be more difficult. The CSS might need a complete rethink and tabbed-content effect might not be the best choice afterall in that case.

Tell us more about the big picture?