Responsive CSS Tabs
Home
Snippets
Responsive CSS Tabs
HTML
CSS
JS
<div class="tabs"> <input type="radio" name="tabs" id="tabone" checked="checked"> <label for="tabone">Tab One</label> <div class="tab"> <h2>Tab One Content</h2> <p>This is Tab's One Content</p> </div> <input type="radio" name="tabs" id="tabtwo"> <label for="tabtwo">Tab Two</label> <div class="tab"> <h2>Tab Two Content</h2> <p>This is Tab's Two Content.</p> </div> <input type="radio" name="tabs" id="tabthree"> <label for="tabthree">Tab Three</label> <div class="tab"> <h2>Tab Three Content</h2> <p>This is Tab's Three Content</p> </div> </div>
.tabs { display: flex; flex-wrap: wrap; } .tabs label { order: 1; display: block; padding: 1rem 2rem; margin-right: 0.2rem; cursor: pointer; background: #90CAF9; font-weight: bold; transition: background ease 0.2s; } .tabs .tab { order: 99; flex-grow: 1; width: 100%; display: none; padding: 1rem; background: #fff; } .tabs input[type="radio"] { display: none; } .tabs input[type="radio"]:checked + label { background: #fff; } .tabs input[type="radio"]:checked + label + .tab { display: block; } @media (max-width: 45em) { .tabs .tab, .tabs label { order: initial; } .tabs label { width: 100%; margin-right: 0; margin-top: 0.2rem; } } body { background: #eee; padding: 10vh; font-family: sans-serif; font-weight: 300; line-height: 1.5; }
//JavaScript
Ad #1
Ad #2
Scroll to Top