#key - How To Build Tabs only with CSS - Digital-Heart - Medium
// boutons
// contenus
Tab1 Contents
Tab2 Contents
// css pour cacher/montrer
input { display: none; } /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none } /* hide contents *//* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2 { display: block; }
// css pour styler
input + label { /* box with rounded corner */
border: 1px solid #999;
background: #EEE;
padding: 4px 12px;
border-radius: 4px 4px 0 0;
position: relative;
top: 1px;
}
input:checked + label { /* white background for selected tab */
background: #FFF;
border-bottom: 1px solid transparent;
}
input ~ .tab { /* grey line between tab and contents */
border-top: 1px solid #999;
padding: 12px;
}