Pure CSS toggles

Developer
Mario Nebl
Size
3,607 Kb
Views
107,272
  1. Pure CSS toggles Previews
  2. Pure CSS toggles HTML Codes
  3. Pure CSS toggles CSS Codes

How do I make an pure css toggles?

Pure css toggles, leveraging the inline input[type="radio"] and input[type="select"] technique.. What is a pure css toggles? How do you make a pure css toggles? This script and codes were developed by Mario Nebl on 07 July 2022, Thursday.

Pure CSS toggles Previews
IQ Test

Pure CSS toggles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS toggles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="toggledemo"> <section class="toggle"> <h3 class="h h3"><code>input[type="radio"]</code> to hold state</h3> <p> <code>input[type="radio"]</code> is suitable whenever you want slides to close automatically when a new one is activated. By adding an input wihout connected content it is possible to close the currently active slide. See <code>#radio-disabled</code> in this pen as an example. <p> <ul class="togglelist"> <li class="item"> <input class="state" type="radio" name="radiostate" id="radio-1" /> <label class="handle" for="radio-1">Slide 1</label> <section class="content"> <div class="container"> <h3 class="h h3">Slide 1</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> </div> </section> </li> <li class="item"> <input class="state" type="radio" name="radiostate" id="radio-2" /> <label class="handle" for="radio-2">Slide 2</label> <section class="content"> <div class="container"> <h3 class="h h3">Slide 2</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. </p> </div> </section> </li> <li class="item"> <input class="state" type="radio" name="radiostate" id="radio-3" /> <label class="handle" for="radio-3">Slide 3</label> <section class="content"> <div class="container"> <h3 class="h h3">Slide 3</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. </div> </section> </li> </ul> <input class="state" type="radio" name="radiostate" id="radio-disabled" checked="checked" /> </section>
</article>
<article class="toggledemo"> <section class="toggle"> <h3 class="h h3"><code>input[type="checkbox"]</code> to hold state</h3> <p> <code>input[type="checkbox"]</code> is a good match if you want the single toggle items to be controlable individually. <p> <ul class="togglelist"> <li class="item"> <input class="state" type="checkbox" name="checkstate" id="select-1" /> <label class="handle" for="select-1">Slide 4</label> <section class="content"> <div class="container"> <h3 class="h h3">Slide 4</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> </div> </section> </li> <li class="item"> <input class="state" type="checkbox" name="checkstate" id="select-2" /> <label class="handle" for="select-2">Slide 5</label> <section class="content"> <div class="container"> <h3 class="h h3">Slide 5</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. </p> </div> </section> </li> <li class="item"> <input class="state" type="checkbox" name="checkstate" id="select-3" /> <label class="handle" for="select-3">Slide 6</label> <section class="content"> <div class="container"> <h3 class="h h3">Slide 6</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. </div> </section> </li> </ul> </section>
</article>
<article class="flow"> <section> <h3 class="h h3">I go with the flow.</h3> <p> You virtually get controls for radio-controlled toggles for free! </p> <p> Plus you got autoscroll to the affected area. </p> <div class="buttonrow"> <label class="button" for="radio-3">Show Slide 3</label> <label class="button" for="select-1">Toggle Slide 4</label> <label class="button" for="radio-disabled">Close all radios</label> </div> </section>
</article>
</body>
</html>

Pure CSS toggles - 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;
}
ul { list-style-type: none; padding: 0;
}
code { background: #eee;
}
.h { margin-top: 0;
}
.toggledemo,
.flow { margin: 1rem auto; padding: 1rem; width: 75%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1);
}
.button { display: inline-block; padding: .75rem 1rem; background: #5ec792; font-weight: bold; color: #fff; -webkit-transition: 0.3s all ease-in; transition: 0.3s all ease-in;
}
.button:hover { box-shadow: inset 0 -2.5px #246846;
}
.button:active { box-shadow: none;
}
.state { position: absolute; top: 0; left: -100vw;
}
.togglelist { position: relative;
}
.togglelist .state:checked + .handle { background: #5ec792; color: #fff;
}
.togglelist .state:checked + .handle::after { color: inherit; -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.togglelist .state:checked ~ .content { display: block;
}
.togglelist .content { display: none; -webkit-transition: 0.5s max-height ease-in; transition: 0.5s max-height ease-in;
}
.togglelist .container { padding: .75rem;
}
.togglelist .handle { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: .75rem; background: rgba(147, 147, 147, 0.1); -webkit-transition: 0.3s all ease-in; transition: 0.3s all ease-in;
}
.togglelist .handle::after { content: '▼'; margin-left: auto; color: rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
}
.togglelist.js .content { display: block; height: 0; -webkit-transition: 0.5s height ease-in-out; transition: 0.5s height ease-in-out;
}
.togglelist.js .state:checked ~ .content { height: auto;
}
Pure CSS toggles - Script Codes
Pure CSS toggles - Script Codes
Home Page Home
Developer Mario Nebl
Username marionebl
Uploaded July 07, 2022
Rating 3
Size 3,607 Kb
Views 107,272
Do you need developer help for Pure CSS toggles?

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
Blog Concept - Landing Page
Basic jogwheel example
Floating Labels
Pure CSS lightbox technique
Pure CSS tabs
A Pen by Mario Nebl
JQuery for the poor
The Dark Side of the Moon 3D
Animation in relation to user input, the sane way
Blog Concept - Single Post
Create amazing art & images 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!