Plus Minus expand toggle
How do I make an plus minus expand toggle?
What is a plus minus expand toggle? How do you make a plus minus expand toggle? This script and codes were developed by Christian Stuff on 31 July 2022, Sunday.
Plus Minus expand toggle - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Plus Minus expand toggle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="plus-minus-toggle collapsed"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Plus Minus expand toggle - Script Codes CSS Codes
body { padding: 30px;
}
.plus-minus-toggle { cursor: pointer; height: 21px; position: relative; width: 21px;
}
.plus-minus-toggle:before,
.plus-minus-toggle:after { background: #000; content: ''; height: 5px; left: 0; position: absolute; top: 0; width: 21px; transition: transform 500ms ease;
}
.plus-minus-toggle:after { transform-origin: center;
}
.plus-minus-toggle.collapsed:after { transform: rotate(90deg);
}
.plus-minus-toggle.collapsed:before { transform: rotate(180deg);
}
Plus Minus expand toggle - Script Codes JS Codes
$(function() { $('.plus-minus-toggle').on('click', function() { $(this).toggleClass('collapsed'); });
});
Developer | Christian Stuff |
Username | Regaddi |
Uploaded | July 31, 2022 |
Rating | 3 |
Size | 2,177 Kb |
Views | 155,848 |
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 |
Bootstrap3 Grid-Test | 2,580 Kb |
A Pen by Christian Stuff | 2,265 Kb |
Navigation and Back Icon | 2,254 Kb |
Tc.Module.Visual | 2,289 Kb |
Tiles | 1,486 Kb |
Advent of Code 2016 - Day 8 | 4,236 Kb |
Tc.Module.Teaser.Thin | 2,255 Kb |
Tc.Module.Teaser | 2,346 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 |
Twitch JSON API | Jvhti | 2,808 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Button Option Group | Honchoman | 1,859 Kb |
SVG Circle Progress | JMChristensen | 3,368 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 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!