Semantic element to create a toggle and best way to undo a function

Sample:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Toggle</title>
  <style>
    #first {
      color: blue;
    }
    #second {
      border: 1px solid green;
    }
    #third {
      background: tan;
    }
  </style>
</head>

<body>
  <label for="box">Toggle</label>
  <input type="checkbox" id="box" onchange="toggle();">
  <div id="first">First</div>
  <div id="second">Second</div>
  <div id="third">Third</div>
  <script>
    function toggle() {
      var box = document.getElementById('box');
      var first = document.getElementById('first');
      var second = document.getElementById('second');
      var third = document.getElementById('third');
      if (box.checked) {
        first.style.color = 'red';
        second.style.border = '2px dotted blue';
        third.style.background = 'olive';
      } else {
        first.style.color = 'blue';
        second.style.border = '1px solid green';
        third.style.background = 'tan';
      }
    }
  </script>
</body>

</html>

Demo: [jsfiddle.net ]

I wonder if an input checkbox is the right element to create a toggle. I also want to know how to undo what I have in the if clause: in else do I have to repeat my stylesheet or is there a shorter neater way to get back to the initial state?


if (box.checked) {
  first.style.color = 'red';
  second.style.border = '2px dotted blue';
  third.style.background = 'olive';
} else {
  first.style.color = '';
  second.style.border = '';
  third.style.background = '';
}

Semantic element to create a toggle and best way to undo a function

Rain_Lover

Fotiman

Fotiman

Rain_Lover

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week