Pure CSS tabs

Developer
Mario Nebl
Size
4,046 Kb
Views
52,624
  1. Pure CSS tabs Previews
  2. Pure CSS tabs HTML Codes
  3. Pure CSS tabs CSS Codes
  4. Pure CSS tabs JS Codes

How do I make an pure css tabs?

Pure CSS tabs avoiding :target and absolute positioning. Work without JS and without animations/transitions. Can easily be enhanced via JS.. What is a pure css tabs? How do you make a pure css tabs? This script and codes were developed by Mario Nebl on 07 July 2022, Thursday.

Pure CSS tabs Previews
IQ Test

Pure CSS tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="cssstate" class="state cssstate" checked="checked" />
<input type="checkbox" id="jsstate" class="state jsstate" checked="checked" />
<nav class="toolbar"> <label class="button cssstatelabel" for="cssstate">Toggle CSS</label> <label class="button jsstatelabel" for="jsstate">Toggle JS</label>
</nav>
<article class="tabs"> <input type="radio" name="state" class="state" id="tab-1" checked="checked" /> <label class="label" for="tab-1"> Tab 1 </label> <section class="content active"> <div class="container"> <h3 class="h h3">Tab 1</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </section> <input type="radio" name="state" class="state" id="tab-2" /> <label class="label" for="tab-2"> Tab 2 </label> <section class="content"> <div class="container"> <h3 class="h h3">Tab 2</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </section> <input type="radio" name="state" class="state" id="tab-3" /> <label class="label" for="tab-3"> Tab 3 </label> <section class="content"> <div class="container"> <h3 class="h h3">Tab 3</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p> </div> </section> <input type="radio" name="state" class="state" id="tab-4" /> <label class="label" for="tab-4"> Tab 4 </label> <section class="content"> <div class="container"> <h3 class="h h3">Tab 4</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> </section>
</article>
<article class="flow"> <section> <h3 class="h h3">I go with the flow.</h3> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </section>
</article> <script src="js/index.js"></script>
</body>
</html>

Pure CSS tabs - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { font-family: "Helvetica Neue", Helvetica, Arial; font-size: 15px; margin: 0; padding: 0; background: #5ec792;
}
.h { margin-top: 0;
}
.state { position: absolute; top: 0; left: -100vw;
}
.toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; padding: .3rem; margin-bottom: 1rem; background: rgba(0, 0, 0, 0.9); color: #fff;
}
.toolbar .button { padding: .3rem 1rem; -webkit-transition: 0.3s background ease-in; transition: 0.3s background ease-in;
}
.toolbar .button:hover { background: rgba(255, 255, 255, 0.1);
}
.cssstate:checked ~ .tabs { margin: 0 auto; width: 75%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden;
}
.cssstate:checked ~ .tabs .state:checked + .label { color: #fff; background: rgba(0, 0, 0, 0.1);
}
.cssstate:checked ~ .tabs .state:checked + .label + .content { display: block;
}
.cssstate:checked ~ .tabs .label { position: relative; z-index: 2; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 100px; padding: 1rem; background: #fff; text-align: center; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.cssstate:checked ~ .tabs .container { padding: 1rem; border: 1px solid rgba(0, 0, 0, 0.1);
}
.cssstate:checked ~ .tabs .content { display: none; position: relative; z-index: 1; width: 100%; background: #fff; overflow: hidden;
}
.cssstate:checked ~ .tabs.js .content { z-index: 1; display: block; height: 0; padding: 0; -webkit-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out;
}
.cssstate:checked ~ .tabs.js .content .container { background: rgba(0, 0, 0, 0.1);
}
.cssstate:checked ~ .tabs.js .content.active { z-index: 2; height: auto;
}
.cssstate:checked ~ .tabs.js .content.active .container { background: rgba(0, 0, 0, 0);
}
.flow { margin: 1rem auto; width: 75%; padding: 1rem; border: 1px solid rgba(0, 0, 0, 0.1); background: #fff;
}

Pure CSS tabs - Script Codes JS Codes

function getTransitionEndEventName() { var i, undefined, el = document.createElement('div'), transitions = { 'transition':'transitionend', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } }
}
var container = document.querySelectorAll('.tabs')[0];
var contents = container.querySelectorAll('.content');
var flagEl = document.getElementById('jsstate');
var flag = flagEl.checked;
var transitionEnd = getTransitionEndEventName();
container.classList.toggle('js', flag);
flagEl.addEventListener('change', function(e){ flag = flagEl.checked; container.classList.toggle('js', flag);
}, false);
container.addEventListener('change', function(e){ if (flag) { var label = e.target.nextElementSibling; var content = label.nextElementSibling; var height = content.firstElementChild.offsetHeight; for (i in contents) { if (typeof contents[i] === 'object'){ contents[i].classList.remove('active'); contents[i].style.height = ''; } } content.classList.add('active'); content.style.height = height + 'px'; }
}, false);
container.addEventListener(transitionEnd, function(e){ if (e.propertyName !== 'height' || ! e.target.classList.contains('active')) { return; }; //e.target.style.height = '';
}, false);
Pure CSS tabs - Script Codes
Pure CSS tabs - Script Codes
Home Page Home
Developer Mario Nebl
Username marionebl
Uploaded July 07, 2022
Rating 3
Size 4,046 Kb
Views 52,624
Do you need developer help for Pure CSS tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Nebl (marionebl) Script Codes
Name
Basic jogwheel example
Animation in relation to user input, the sane way
Blog Concept - Landing Page
A Pen by Mario Nebl
Blog Concept - Single Post
Pure CSS tooltips
Pure CSS lightbox technique
The Dark Side of the Moon 3D
JQuery for the poor
Pure CSS toggles
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!