Solution 1 :

The CSS rule for the reset radio button makes both green and blue divs disappear. That shouldn’t be.

Just remove this part:

body {
  margin: 0;
  text-align: center;
  font-family: Verdana;
  background: #f5f5f5;
}

h1 {
  text-align: center;
}

.container {
  width: 70%;
  margin: 0 auto;
  display: grid;
}

input[type="radio"] {
  display: none;
}

label {
  width: 25%;
  float: left;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #222222;
  padding: 0.5%;
  margin: 0.5%;
  margin-bottom: 30px;
  cursor: pointer;
}

input[type="radio"][id="blue"]:checked+label {
  background: #6666ff;
}

input[type="radio"][id="blue"]:checked~.green {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

input[type="radio"][id="green"]:checked+label {
  background: #66dd99;
}

input[type="radio"][id="green"]:checked~.blue {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

/*
input[type="radio"][id="reset"]:checked~.green,
input[type="radio"][id="reset"]:checked~.blue {
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}
*/
.tile {
  width: 17%;
  height: 60px;
  float: left;
  transition: all 1s;
  margin: 0.5%;
  padding: 0.5%;
  line-height: 60px;
}

.green {
  background: #66dd99;
}

.blue {
  background: #6666ff;
}
<h1>FILTER BY COLOR</h1>
<div class="container">
  <input type="radio" id="blue" name="color">
  <label for="blue">BLUE</label>
  <input type="radio" id="green" name="color">
  <label for="green">GREEN</label>
  <input type="radio" id="reset" name="color">
  <label for="reset">RESET</label>

  <div class="tile blue">1</div>
  <div class="tile green">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
</div>

Problem :

I want to filter the following contents by color and thereafter reset it on my website and all filtration behaves in the right way except the reset one which makes contents disappear instead of reset it.

The following is my code:

body {
  margin: 0;
  text-align: center;
  font-family: Verdana;
  background: #f5f5f5;
}

h1 {
  text-align: center;
}

.container {
  width: 70%;
  margin: 0 auto;
  display: grid;
}

input[type="radio"] {
  display: none;
}

label {
  width: 25%;
  float: left;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #222222;
  padding: 0.5%;
  margin: 0.5%;
  margin-bottom: 30px;
  cursor: pointer;
}

input[type="radio"][id="blue"]:checked+label {
  background: #6666ff;
}

input[type="radio"][id="blue"]:checked~.green {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

input[type="radio"][id="green"]:checked+label {
  background: #66dd99;
}

input[type="radio"][id="green"]:checked~.blue {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

input[type="radio"][id="reset"]:checked~.green,
input[type="radio"][id="reset"]:checked~.blue {
  display: block;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

.tile {
  width: 17%;
  height: 60px;
  float: left;
  transition: all 1s;
  margin: 0.5%;
  padding: 0.5%;
  line-height: 60px;
}

.green {
  background: #66dd99;
}

.blue {
  background: #6666ff;
}
<h1>FILTER BY COLOR</h1>
<div class="container">
  <input type="radio" id="blue" name="color">
  <label for="blue">BLUE</label>
  <input type="radio" id="green" name="color">
  <label for="green">GREEN</label>
  <input type="radio" id="reset" name="color">
  <label for="reset">RESET</label>

  <div class="tile blue">1</div>
  <div class="tile green">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
</div>

How can I solve this?

Comments

Comment posted by do─čukan

what is meant by reset? what do you want it to be?

Comment posted by Umutambyi Gad

to show them all without filtering them by color(Like how it was before filtering)

By