Pure css tabs transitions

Question

How can I make this tabs script: FIDDLE

work like this: DEMO

Where did I made a mistake?

a[name="tab1"] + .facebook_box {
    display: block
}
:target + .twitter_box {
    display: block
}
:target ~ a[name="tab1"] + .facebook_box {
    display: none
}

Answer 1

I've updated your Fiddle which is a working example now.

There are various issues in your Fiddle but the biggest issue is that the technique you are trying to use depends on a set HTML structure. You tried to add an extra <div class="tab-content"> which wasn't taken care of in your CSS.

Also the links in the labels were empty and didn't have a width/height so you can't click on them.

The HTML I've used:

<div class="social_slider">
    <div class="tabs">
        <div class="tab-links">
            <input checked type="radio" name="tab" id="fbtab" />
            <input type="radio" name="tab" id="twtab" />
            <label for="fbtab" class="facebook_icon"><a href="#tab1"></a></label>
            <label for="twtab" class="twitter_icon"><a href="#tab2"></a></label>
        </div>
            <a name="tab1"></a>
                 <article class="facebook_box">
                     Facebook
                 </article>
            <a name="tab2"></a>
                 <article class="twitter_box">
                     Twitter
                 </article> 
   </div>
</div>

The most important changes to the CSS was the removal of the .tab-content and updating the .twitter_box with the position: absolute; and the top/left/right/bottom:

.social_slider .twitter_box {
    border-radius: 8px;
    background-color: #19bfe5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    display:none;
    height:300px;
    border: 10px solid #68c2ff;
}

Making the anchors clickable:

.social_slider .tab-links label a {
    display: block;
    height: 100%;
}