Question

I’m using the code from the following site: http://calebogden.com/css-tabs/ which has allowed me to create some CSS tabs, however, the content is only visible when you hover over one of the tabs and ideally I would like the content to be visible without people having to do that.

The code is:

<!-- HTML -->
<div id="content" role="main">

            <div id="tabs">
                <nav class="tabs">
                    <a href="#">About Scamper</a>
                    <section class="tabs-content">
                        Scamper is the coolest.
                    </section>
                    <a href="#">His Anatomy</a>
                    <section class="tabs-content">
                        Partly because he's a penguin.
                    </section>
                    <a href="#">Life Achievements</a>
                    <section class="tabs-content">
                        But also he had a movie made about him.
                    </section>
                    <a href="#">More Info</a>
                    <section class="tabs-content">
                        These tabs sure are great.
                    </section>
                </nav>
            </div>

        </div>

<!-- css -->

#content { padding: 25px; background: #FFF; }

    #tabs {
        border: 1px solid #DEDEDE;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        height: 205px;
        position: relative;
        overflow: hidden;
    }
    .tabs-content {
        padding: 25px;
        height: 120px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
        display: none;
    }
    .tabs {
        overflow: hidden; 
        background: #e1e1e1; 
        background: -moz-linear-gradient(center top , #f2f2f2, #e1e1e1); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1)); 
        -moz-border-radius: 4px 4px 0 0; 
        -webkit-border-radius: 4px 4px 0 0; 
        border-radius: 4px 4px 0 0; 
        -webkit-box-shadow: 0 1px 0 #FFF inset; 
        -moz-box-shadow: 0 1px 0 #FFF inset; 
        box-shadow: 0 1px 0 #FFF inset;
    }
    .tabs a {
        display: block; 
        float: left; 
        font: 15px/35px Arial, Helvetica, Sans-serif; 
        padding: 0 20px 0 40px; 
        color: #999; 
        text-shadow: 0 1px 0 #FFF;
        border-left: solid 1px rgba(0,0,0,0.05);
        border-right: solid 1px rgba(255,255,255,0.7);
        position: relative;
        overflow: hidden;
    }
    .tabs a:first-child {
        border-left-width: 0;
    }
    .tabs a:last-child {
        border-right-width: 0;
    }
    .tabs a:after {
        content: '✔';
        position: absolute;
        top: 0;
        left: 10px;
        line-height: 21px;
        font-size: 10px;
        width: 21px; 
        text-align: center; 
        margin: 7px 10px 5px 0; 
        background: #000; 
        font-size: 12px; 
        -moz-border-radius: 21px; 
        -webkit-border-radius: 21px; 
        border-radius: 21px; 
        background: #bdbdbd; 
        background: -moz-linear-gradient(center top , #d4d4d4, #bdbdbd); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#bdbdbd)); 
        -webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset; 
        -moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset; 
        box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0,0,0,0.25) inset; 
        text-shadow: 0 1px 0 #999; 
        color: #ffffff;
    }
    .tabs a:hover {
        background: #FFF;
        border-left-color: #CCC;
    }
    .tabs a:hover:after {
        background: #038bd5; 
        background: -moz-linear-gradient(center top , #2dc3fc, #038bd5); 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2dc3fc), color-stop(100%,#038bd5)); 
        text-shadow: 0 1px 0 #096c9e; 
        -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85); 
        -moz-box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85); 
        box-shadow: 0 1px 0 0 rgba(255,255,255,0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0,148,255,0.85)
    }
    .tabs a:hover + .tabs-content {
        display: block;
    }
    .tabs-content:hover {
        display: block;
    }
</style>

Can anyone assist in what I need to edit in the CSS to do this based on the code provided in the script?

Answer 1

There is an updated version of the code which allows you to click on a tab to view the content. After clicking, the content remains visible.

http://calebogden.com/advanced-css-tabs/

Relevant excerpts:

Since we are going to be using the target selector, we’ll need to add
ID’s [sic] to the links, and selectors the the HREF attributes as well. This
will allow us to select the tab via it’s target, and it’s next sibling
from the same method. The new HTML for a link will be as follows:

<a id="tab1" href="#tab1">Scamper</a>

With the HTML revised, now all we need to do is change the selectors from using :hover to :target.

.tabs a:target { declarations } 
.tabs a:target:after { declarations } 
.tabs a:target + section.tabs-content { declarations }

Here is a working fiddle showing the :target selectors: http://jsfiddle.net/8BKtz/

To select an initial tab, you can put the hash into the URL.

@matthias.p shows a nicer solution for selecting an initial tab by using smarter selectors. However all solutions (including the original code and my solution) rely on newer CSS selectors so they will break partially or completely in IE8 and below, even with a library like Modernizr added to support the HTML 5 elements used (like section).

For now, I would probably use a snippet of JavaScript to make the code more widely compatible. It’s nice to know that in the future a pure CSS solution will be available.

Here’s a complete solution which uses JS to achieve greater compatibility: http://jsfiddle.net/hN4S3/1/