Button toggle box
How do I make an button toggle box?
Idea for an interface element. What is a button toggle box? How do you make a button toggle box? This script and codes were developed by Niels Oeltjen on 08 September 2022, Thursday.
Button toggle box - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button toggle box</title> <link href='https://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="toggle-box"> <a id="toggle-handle" href="#toggle-box"> <span id="open">More settings</span> <span id="close">Close</span> </a> <ul> <li> <label for="s-1"> <input id="s-1" type="checkbox" checked> <span>Setting One</span> </label> </li> <li> <label for="s-2"> <input id="s-2" type="checkbox" checked> <span>Setting Two</span> </label> </li> <li> <label for="s-3"> <input id="s-3" type="checkbox"> <span>Setting Three</span> </label> </li> <li> <label for="s-4"> <input id="s-4" type="checkbox" checked> <span>Setting Four</span> </label> </li> <li> <label for="s-5"> <input id="s-5" type="checkbox"> <span>Setting Five</span> </label> </li> </ul>
</div>
<p>Click button for more settings</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Button toggle box - Script Codes CSS Codes
body { background: black; padding: 4em; font-family: "Share Tech", monospace; font-size: 1.25em;
}
* { margin: 0; padding: 0;
}
#toggle-box { -moz-transition: background 200ms linear; -o-transition: background 200ms linear; -webkit-transition: background 200ms linear; transition: background 200ms linear; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 20em; margin: 0 auto; background: gold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid black; color: #ccc;
}
#toggle-box #open { color: #665600;
}
#toggle-box #close { display: none; color: #ccc;
}
#toggle-box ul { display: none; list-style-type: none; border-top: 1px solid black;
}
#toggle-box ul li { text-indent: 0; border-bottom: 1px solid black;
}
#toggle-box ul li label { display: block; padding: 0.6em 2em 0.6em 2em;
}
#toggle-box ul li span { padding-left: 1em;
}
#toggle-box.open { background: #222;
}
#toggle-box.open #toggle-handle #open { display: none;
}
#toggle-box.open #toggle-handle #close { display: inline;
}
#toggle-box.open + p { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;
}
#toggle-handle { padding: 1em; display: block; text-align: center; text-decoration: none;
}
p { -moz-transition: opacity 100ms linear; -o-transition: opacity 100ms linear; -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; color: #444; text-align: center; padding-top: 1em;
}
Button toggle box - Script Codes JS Codes
$('#toggle-handle').on('click', function(event) { $('#toggle-box ul').slideToggle(300); $(this).parent().toggleClass('open'); event.preventDefault();
});
Developer | Niels Oeltjen |
Username | NielsOeltjen |
Uploaded | September 08, 2022 |
Rating | 4 |
Size | 3,043 Kb |
Views | 30,360 |
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!
Name | Size |
Semantic vertical centering | 2,394 Kb |
Animated background colours | 1,979 Kb |
Multiple SVG icons in one file | 2,149 Kb |
Animated css matrix type | 3,484 Kb |
Prototype for a menu pattern | 4,074 Kb |
Text as background | 2,292 Kb |
SVG icons coloured using js and hash | 2,574 Kb |
CSS only audio player UI | 3,325 Kb |
Layout states using jQuery and Data Attributes | 3,078 Kb |
Rounded tabs | 1,899 Kb |
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!
Name | Username | Size |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Easing | GreenSock | 2,043 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
Ghost | Mghayour | 11,738 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!