Grow your CSS skills. Land your dream job.

CSS Tab Content (n00b)

  • # May 21, 2013 at 11:41 am

    I followed the link for the tabs with the rounded edges, located here : http://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 !

    # May 21, 2013 at 11:45 am

    We’d need to see your code.

    Could you replicate it in Codepen?

    # May 21, 2013 at 3:50 pm

    The code is directly from this website with the link I posted earlier. Here is the demo of it:
    http://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)

    # May 21, 2013 at 4:22 pm

    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

    # May 21, 2013 at 4:52 pm

    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

    # May 21, 2013 at 5:22 pm

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

    # May 22, 2013 at 7:35 am

    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

    # May 22, 2013 at 9:58 am

    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)

    # May 22, 2013 at 10:23 am

    That worked ! Thanks unasAquila.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".