1

So I want to create something where if I check a checkbox (say Checkbox A), it will cause another fully-functioning checkbox (say Checkbox B) to appear. So far I managed to make the Checkbox B appear when Checkbox A is checked. However, if Checkbox B is clicked, nothing happens.

.arrowmenu {
  margin: 0 30px 0 0;
}

/* Arrow button */
label[for="togglearrow"] {
  background: url('arrow2.png') no-repeat;
  background-size: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 0);
  bottom: 15px;
  left: 8px;
  font-size: 0px;
  line-height: 26px;
  display: none;
  width: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hides checkbox */
#togglearrow {
  display: none;
}

#toggletasks {
  display: none;
}

label[for="togglearrow"] {
  display: block;
  cursor: pointer;
}

/* Tasks button that shows up when the arrow button is checked/clicked. */
label[for="tasks"] {
  cursor: pointer;
  position: absolute;
  background: url('tasks.png') no-repeat;
  background-size: 100%;
  /*display: none;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* This is the code that allows the user to click the arrow button to show the tasks button. */
#togglearrow:checked+label[for="tasks"] {
  background-size: 100%;
  display: block;
  text-decoration: none;
  font-size: 0px;
  height: 30px;
  width: 30px;
  bottom: 13px;
  left: 55px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label[for="tasksmenu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}

/* This is the code that is supposed to allow the user to click the tasks button to open up a menu, however nothing happens when I click on the tasks button. */
#toggletasks:checked+label[for="tasksmenu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}
<div class="arrow">
  <label for="togglearrow">.</label>
  <input type='checkbox' id="togglearrow" />

  <label for="tasks">.</label>
  <input type='checkbox' id="toggletasks">

  <label for="tasksmenu">test</label>
The code that is supposed to allow the user to click the tasks button to open up a menu, however, nothing happens when I click on the tasks button. the code that allows the user to click the arrow button to show the tasks button.
Bali Balo
  • 3,338
  • 1
  • 18
  • 35
Aurora123
  • 135
  • 3
  • 13

1 Answers1

3

You can use the :checked selector with a precedence (~) selector like the snippet below

#checkbox-2 {
  display: none;
}

#checkbox-1:checked ~ #checkbox-2 {
  display: block;
}
<input type="checkbox" id="checkbox-1" />

<input type="checkbox" id="checkbox-2" />
Agustin Cornu
  • 186
  • 5
  • Thanks for the response, Agustin! The checkbox did work but for some reason, I can set the dimensions of the checkbox but not the background image. I used the code: "background: url('tasks.png') no-repeat;" under "#togglearrow:checked ~ #toggletasks {", but the background image is not changing. Do you have any suggestions? Thanks! :) – Aurora123 Jul 03 '19 at 00:43
  • 1
    Sadly, checkboxes cannot be styled. A frequent approach to "style" checkboxes is to put them inside a label, hide the actual input and show a div that changes depending on the current state of the checkbox, using the same selectors as my example. Check this codepen example https://codepen.io/agustinrhcp/pen/BgVGwL by using this approach, you can't no longer show another checkbox by checking the other's checked status, because they won't be siblings anymore. Your best solution there would be javascript. – Agustin Cornu Jul 04 '19 at 01:28