CSS3 Tabbed Content Example (Code Snippet)

<div class="tabs">
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">Tab 1</label>
    <div>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec.</p>
        <p>Nunc blandit in pellentesque platea ultrices proin ornare lectus tempus pharetra scelerisque aptent euismod feugiat tempor sem mi donec vitae. Vulputate lectus quis laoreet imperdiet eu dictum dui elit ante mollis ad aliquam vehicula litora nullam id curabitur auctor, enim. Mauris augue, feugiat egestas feugiat, eu curabitur pellentesque mollis mi litora est sollicitudin sem rutrum tincidunt accumsan, egestas velit accumsan.</p>
    </div>
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">Tab 2</label>
	<div>Content for tab 2</div>
</div>

body {
	font-family: Arial, Helvetica, sans-serif;
}
.tabs {
	position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.tabs > label {
	order: 1;
	display: inline-block;
    background-color: #4d4d4d;
    line-height: 50px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 20px 0 20px;
    font-weight: bold;
    color: #f9f9f9;
    border-top: 5px solid #4d4d4d;
}
.tabs > input[type="radio"] {
	display: none;
}
.tabs > input[type="radio"]:checked + label {
	background-color: #eeeeee;
    color: #4d4d4d;
}
.tabs > input[type="radio"]:checked + label + div {
	display: block;
}
.tabs > div {
	order: 2;
	display: none;
    box-sizing: border-box;
    background-color: #eeeeee;
    width: 100%;
    padding: 15px;
    color: #1a1a1a;
    height: 100%;
}

CSS3 Tabbed Content Example

Share Code Snippet