CSS Tab Content (n00b)

[jparker]

I followed the link for the tabs with the rounded edges, located here : https://css-tricks.com/better-tabs-with-round-out-borders/. Since I am new, I have no idea how to add unique content for each tab. From what I have seen online you make the href=”#something” then define the something target in a div but I have never been able to get it to work. It either shows the text for all the tabs on all the tabs or shows nothing … Help !

[Paulie_D]

We’d need to see your code.

Could you replicate it in Codepen?

[jparker]

The code is directly from this website with the link I posted earlier. Here is the demo of it:
https://css-tricks.com/examples/RoundOutTabs2/. It currently has href=”#” as the target for the tabs. I am just trying to figure out how to include stuff on each page (text, etc)

[unasAquila]

try [this](http://codepen.io/unasAquila/pen/nDjgI).

On a side note the reason people ask for example codepens is to see if there is something missing or conflicting in your code

[jparker]

It still does not work I must be missing something. When I render this everything comes out on the same tab and repeats for every tab I select. I put it on code pen here :

http://codepen.io/jparker/pen/icyBJ

[unasAquila]

try [this](http://codepen.io/unasAquila/pen/fgxBn) it is all in the html tab so you can see exactly whats there.

[jparker]

That seemed to work. However, I ran into another issue because I want to have a div of tabs on the top of the screen and the bottom of the screen and have them work independent of each other. When I attempt to do this, the bottom tab shows the selected fine but when you click the second bottom tab it still shows the first tabs content and when you change the tabs on the top they clear out the ones in the bottom. I made a separate JavaScript function for the bottom tabs but I think it is conflicting some how.

Here is the code pen of the problem:

http://codepen.io/jparker/pen/jJlIb

[unasAquila]

Basicaly you need to target the `li`’s in the `div` section you want to target take a look at this [Fork](http://codepen.io/unasAquila/pen/DbdEm)

[jparker]

That worked ! Thanks unasAquila.

[Author]

Posts