Toggle - grouped

Developer
Josh Vogt
Size
2,552 Kb
Views
12,144
  1. Toggle - grouped Previews
  2. Toggle - grouped HTML Codes
  3. Toggle - grouped CSS Codes

How do I make an toggle - grouped?

What is a toggle - grouped? How do you make a toggle - grouped? This script and codes were developed by Josh Vogt on 18 November 2022, Friday.

Toggle - grouped Previews
IQ Test

Toggle - grouped - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle - grouped</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="Sorting" class="sr-sort-control" style="display: block;"> <div class="sr-switch"> <input id="SortTypePostDate" type="radio" name="SortType" value="PostDate" onclick="javascript:SortPage('POSTDATE ');"> <label for="SortTypePostDate">Newest</label> <input checked="checked" id="SortTypeRelevance" type="radio" name="SortType" value="Relevance" onclick="javascript:SortPage('RELEVANCE ');"> <label for="SortTypeRelevance">Relevance</label> </div> <!-- end switch -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Toggle - grouped - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
* { box-sizing: border-box;
}
.sr-switch { background: #eee; display: block; height: 40px; font-family: 'Source Sans Pro'; width: 160px; border: 1px solid #ccc; border-radius: 4px;
}
.sr-switch label { color: #333; font-size: 14px; -webkit-transition: all .2s ease; transition: all .2s ease; cursor: pointer; display: block; width: 50%; float: left; height: 100%; padding: 10px; font-weight: 700; text-align: center;
}
.sr-switch input { display: none;
}
.sr-switch input[value="Relevance"]:checked + label,
.sr-switch input[value="PostDate"]:checked + label { color: #fff; background: #69be28; cursor: text;
}
Toggle - grouped - Script Codes
Toggle - grouped - Script Codes
Home Page Home
Developer Josh Vogt
Username josh_vogt
Uploaded November 18, 2022
Rating 3
Size 2,552 Kb
Views 12,144
Do you need developer help for Toggle - grouped?

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!

Josh Vogt (josh_vogt) Script Codes
Name
A Pen by Josh Vogt
CSS modals and sheets animations
Header - search v2
Items sliding out of list
Workopolis SVG Logo - Animated
Header - search v1
Animating Flexbox Properties
Dismissing and Adding items with CSS transforms
Toggle - just a dropdown
Header - search v3
Create amazing captions 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!