htmlcsstabs

CSS only tabs using input:checked


I found this example (the "checked" version) and it works:

http://jsfiddle.net/2cTwA/

But I want to wrap the input and labels inside a container element (like nav), and if I do that the tabs stop working :(

Is there any solution for this?

found solution: http://jsfiddle.net/2cTwA/7/


Solution

  • With a slight HTML and CSS modification - DEMO

    CSS

    input { display: none; }
    
    nav { overflow: hidden }
    label   { float: left; display: inline-block; padding: 5px 10px; }
    label a { color: #d33; text-decoration: underline; cursor: pointer; }   
    
    .tab { display: none; border: 1px solid #333; padding: 10px; }
    a[name="tab1"] + .tab { display: block }
    :target + .tab { display: block }
    :target ~ a[name="tab1"] + .tab { display: none  }
    

    HTML

    <section class="tab-area tabs-checked">
    
        <nav>
            <input checked type="radio" name="tab" id="tab-A" />
            <input type="radio" name="tab" id="tab-B" />
            <input type="radio" name="tab" id="tab-C" />
    
            <label class="tab-link" for="tab-A"><a href="#tab1">Tab 1</a></label>
            <label class="tab-link" for="tab-B"><a href="#tab2">Tab 2</a></label>
            <label class="tab-link" for="tab-C"><a href="#tab3">Tab 3</a></label>
        </nav>
    
        <a name="tab3"></a>
        <article class="tab">
            <h3>Tab 3</h3>          
        </article>
    
        <a name="tab2"></a>
        <article class="tab">
            <h3>Tab 2</h3>
        </article>    
    
        <a name="tab1"></a>
        <article class="tab">
            <h3>Tab 1.</h3>
        </article>
    
    </section>