Show/Hide, javascript

by Simon Hi

HTML

<div id="a">
  <input type="checkbox" onclick="magic(this);">
  <span>Lorem ipsum</span>
</div>

CSS

/* core mecanism */

#a span {
  display: none;
}

#a.checked span {
  display: inline-block;
}

/* decoration */

#a {
  box-sizing: border-box;
  position: relative;
  min-height: 2rem;
  line-height: 2rem;
  background: #eee;
}

#a input {
  width: 2rem;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#a input::-ms-check {
  display: none;
}

#a input:before,
#a input:after {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  color: transparent;
  background-color: #ccc;
  background-size: 50% 50%;
  background-position: center;
  background-repeat: no-repeat;
}

#a input:before {
  content: "+";
  z-index: 1;
  background-image: linear-gradient(transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent), linear-gradient(to right, transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent);
}

#a.checked input:after {
  content: "-";
  z-index: 2;
  background-image: linear-gradient(transparent, transparent 45%, #000 45%, #000 55%, transparent 55%, transparent);
}

JavaScript

function magic(e) {
  var a = e.parentNode;
  if (e.checked) {
    a.className = "checked";
  } else {
    a.className = "";
  }
}