Pure CSS tabs switch - css

Question

How can I make this tabs script: FIDDLE work like this: DEMO
I want to switch social tabs between each other but it doesn't work.
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

** UPDATE: This is a duplicate of this question **
Here are the changes to make it work:
First a small bug: close the anchor tag like this: </a> not like this <a/>.
Then change the order of your articles:
<div class="tab-content">
<a name="tab2"></a>
<article class="twitter_box">t</article>
<a name="tab1"></a>
<article class="facebook_box">f</article>
</div>
Then delete the ".social_slider .tab-content" before the ".facebook_box" or add it also to the lines doing the magic otherwise you overwrite the magic with the more precice definition of your class.
And then you need to increase the size of your link inside the tab, otherwise you only click on the label, not the anchor.
.facebook_box {
border-radius: 8px;
background-color: #fff;
position: relative;
z-index: 99998;
display:none;
height:300px;
border:10px solid #3a93d6;
}
.twitter_box {
border-radius: 8px;
background-color: #19bfe5;
position: relative;
z-index: 99998;
display:none;
height:300px;
border: 10px solid #68c2ff;
}
.twitter_icon > a, .facebook_icon > a{
display: block;
height: 100%;
width: 100%;
}