score:0
I have written some code and will explain how it works:
/*---- Content of entries ----*/
$(".entry").each(function() {
var one = $(this).attr("data-one"), two = $(this).attr("data-two");
$(this).html("My data-one is <span>" + one + "</span> and my data-two is <span>" + two + "</span>");
});
/*--- Fix button ---*/
$("button.fix").on("click", function() {
$(".entry").show().end().not(".shown").addClass("shown");
$("input[type=checkbox]").prop("checked", true);
});
/*--- Toggle entries ---*/
$("label").on("click", function() {
if ($(this).find(".button").attr("data-one")) {
if ($(this).find('input[type=checkbox]').prop("checked") === true) {
$(".entry").filter("[data-one='" + $(this).find(".button").attr("data-one") + "']").addClass("shown");
} else {
$(".entry").filter("[data-one='" + $(this).find(".button").attr("data-one") + "']").removeClass("shown");
}
} else {
if ($(this).find('input[type=checkbox]').prop("checked") === true) {
$(".entry").filter("[data-two='" + $(this).find(".button").attr("data-two") + "']").addClass("shown2");
} else {
$(".entry").filter("[data-two='" + $(this).find(".button").attr("data-two") + "']").removeClass("shown2");
}
}
});
html,
body {
margin: 0;
padding: 0;
}
body {
background: white;
font-family: Helvetica, sans-serif;
font-size: 1em;
text-align: center;
color: black;
}
.nav {
height: 180px;
display: flex;
justify-content: space-evenly;
align-content: center;
}
.nav label {
display: flex;
margin: 10px;
cursor: pointer;
}
.button {
position: relative;
float: left;
display: block;
width: 18px;
height: 18px;
border-radius: 4px;
background-color: #606062;
background-image: linear-gradient(#474749, #606062);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
transition: all 0.15s ease;
}
.button svg {
position: absolute;
top: 3px;
left: 3px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 17;
stroke-dashoffset: 17;
transform: translate3d(0, 0, 0);
}
.button+span {
float: left;
margin-left: 6px;
}
.nav input[type="checkbox"] {
position: absolute;
opacity: 0;
}
.nav input[type="checkbox"]:checked+.button {
background-color: #606062;
background-image: linear-gradient(#255cd2, #1d52c1);
}
.nav input[type="checkbox"]:checked+.button svg {
stroke-dashoffset: 0;
transition: all 0.15s ease;
}
.container {
margin-top: 5vh;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: space-around;
}
.entry {
width: 20vw;
height: 20vh;
border: 2px solid;
margin: 5px;
display: none;
}
.entry.shown.shown2 {
display: block;
}
.entry span {
font-weight: 900;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<header>
<div class="nav">
<button class="fix">
Fix (show everything)
</button>
<div class="navigation">
<h2>Data-one</h2>
<label for="ex1">
<input type="checkbox" id="ex1" checked="true">
<span class="button" data-one="1">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 1</span>
</label>
<label for="ex2">
<input type="checkbox" id="ex2" checked="true">
<span class="button" data-one="2">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 2</span>
</label>
<label for="ex3">
<input type="checkbox" id="ex3" checked="true">
<span class="button" data-one="3">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 3</span>
</label>
<label for="ex4">
<input type="checkbox" id="ex4" checked="true">
<span class="button" data-one="4">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 4</span>
</label>
</div>
<div class="navigation">
<h2>Data-two</h2>
<label for="ex5">
<input type="checkbox" id="ex5" checked="true">
<span class="button" data-two="5">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 5</span>
</label>
<label for="ex6">
<input type="checkbox" id="ex6" checked="true">
<span class="button" data-two="6">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 6</span>
</label>
<label for="ex7">
<input type="checkbox" id="ex7" checked="true">
<span class="button" data-two="7">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 7</span>
</label>
<label for="ex8">
<input type="checkbox" id="ex8" checked="true">
<span class="button" data-two="8">
<svg width="12px" height="11px" viewBox="0 0 12 11">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
<span>Example 8</span>
</label>
</div>
</div>
</header>
<div class="container">
<div class="entry shown shown2" data-one="1" data-two="6">
</div>
<div class="entry shown shown2" data-one="3" data-two="6">
</div>
<div class="entry shown shown2" data-one="2" data-two="5">
</div>
<div class="entry shown shown2" data-one="1" data-two="7">
</div>
<div class="entry shown shown2" data-one="1" data-two="5">
</div>
<div class="entry shown shown2" data-one="4" data-two="8">
</div>
<div class="entry shown shown2" data-one="3" data-two="6">
</div>
<div class="entry shown shown2" data-one="2" data-two="7">
</div>
<div class="entry shown shown2" data-one="4" data-two="7">
</div>
<div class="entry shown shown2" data-one="4" data-two="8">
</div>
<div class="entry shown shown2" data-one="3" data-two="5">
</div>
<div class="entry shown shown2" data-one="1" data-two="6">
</div>
<div class="entry shown shown2" data-one="2" data-two="6">
</div>
</div>
</div>
Firstly, you will need to add a second class to the .entry
divs (I have added the class shown2
in my example below and in the snippet):
<div class="entry shown shown2" data-one="1" data-two="6"></div>
Then add some CSS to hide all .entry
divs, and another rule to override the previous rule if .entry
has both the class .shown
and .shown2
:
.entry {
...
display: none;
}
.entry.shown.shown2 {
display: block;
}
And finally this Javascript to replace your click functions on .button[data-one]
and .button[data-two]
:
$("label").on("click", function() { //Gets click events on all <label> elements
if ($(this).find(".button").attr("data-one")) { //If data-one
if ($(this).find('input[type=checkbox]').prop("checked") === true) {
$(".entry").filter("[data-one='" + $(this).find(".button").attr("data-one") + "']").addClass("shown");
} else {
$(".entry").filter("[data-one='" + $(this).find(".button").attr("data-one") + "']").removeClass("shown");
}
} else { //If data-two
if ($(this).find('input[type=checkbox]').prop("checked") === true) {
$(".entry").filter("[data-two='" + $(this).find(".button").attr("data-two") + "']").addClass("shown2");
} else {
$(".entry").filter("[data-two='" + $(this).find(".button").attr("data-two") + "']").removeClass("shown2");
}
}
});
Unfortunately this takes away the slide effect, but that can be reproduced somewhat in CSS and I would be willing to walk you through that in a chatroom if that is what you want.
Related Query
- how to check all the checkbox with two different class
- I need on checkbox click two different calender should open with different age restriction
- Toggle between two different tag contents using checkbox
- How do you toggle a single div visibility with two different click events based on variable?
- Toggle element with two different events
- jquery add one class to two elements on scroll but with different properties
- How to create a button toggle with two states, that behaves like a checkbox for form input
- How to get .toggleClick to return toggle with different elements
- I am trying to toggle between two images that appends on hover with jquery
- Fade out Two different divs at once with Jquery, then fade two more
- Playing multiple videos in two different views with Flowplayer
- How to get two overlay hover icons on an image, each with a different action?
- Toggle between two divs with content
- Toggle between two different click events using jQuery?
- Toggling one thing with two different elements
- AngularJS toggle ng-repeat visibility with checkbox
- how to fetch values of two hidden tags with different id
- Get the id value of two different divs with the same class
- Checkbox toggle with jQuery
- How can I simplify this bit of jquery? An array of some sort with two different selectors in each click function?
- Conditional row formatting jQuery cells in two consecutive row with different values
- Re-load two partial views in ASP.NET MVC with different intervals using JQuery
- Toggle between two forms with one edit button
- jQuery connect two elements with different ids
- jQuery: Animating two images with one function in different directions
- Better ajax toggle performance for checkbox attr with select change
- Link Values/Get variables of two different select option with jquery
- Why does sorting an array with toggle producers different descent outcome than without toggle?
- Toggle div depending on checkbox value - with animation
- Checkbox Functionality with Two Series of Checkboxes
- How to change text of span from two different checkbox values
- Validate whether checkbox with the same name is selected in different groups
- jQuery toggle function on the same class placed in two different tabs are not working
- Checkbox toggle field with jQuery
- Toggle classes between two different elements
- Doing mutual exclusive checkbox of two buttons with siblings()
- Custom checkbox bootstrap toggle switch with text
- Wrap some divs with Two different columns
- Toggle element with checkbox with certain attribute
- Two google maps on single page with different id's
- Two different text input with datepicker based on dropdown selection
- How to make the same scope available in two div's with different data?
- Changing option inputs with different checkbox choices
- How to toggle a CSS3 checkbox with jQuery?
- Bootstrap toggle checkbox doesn't get sent with request
- Changing Content in Two Different Div's with Dropdown Menu
- Can't compare two arrays of Object in Jquery, tried with different method without success
- Set cookie with two different values
- CSS class toggle with jquery on different id's
- how to populate two different select boxes with onchange jquery post
More Query from same tag
- IE and firefox behave unpredictably updating location.hash on scroll()
- WooCommerce Cart Page: Remove Item Button move place
- jQuery Get request with current session
- How execute function after append with jquery
- Jvectormap syntax Error color country
- Block jQuery UI calendar dates when radio selected
- jQuery timer not working on input
- Jquery Html getiing contents
- Delete a dragable section for sortable in JQUERY
- Bootstrap Typeahead send form on click
- jQuery style: when is it better to use a var for multiple operations?
- Difficulty sending Ajax Queries through Jquery to a Servlet in Eclipse
- jquery, while loop running in the background, simultaneous while loops
- How to slide two elements, side by side?
- Get Value from Text Box using jquery .aspx page used Master page
- Jquery Animate Left or Right by variable
- Load a HTMLImport (Polymer) when clicking a link <a onclick="...">
- jQuery initially not loading in IE9 quirks mode
- jquery $.each() to for loop conversion
- Jquery - check/uncheck radio buttons on arent click
- How to get event caller from listener function in jQuery
- How do I pass a front end value to JavaScript counter?
- get access to getJSON objects values
- How enable a click event of a button?
- Calculate values from multiple number fileds - Jquery
- Inserting a div element inside of an iframe
- Populate text box according to select dropdown value
- How to change value of textbox onchange created using loop in jquery
- how to show axis in chart using jquery?
- change name of select element in HTML form dynamically