CSS - Checked Zippy

From NoskeWiki
Jump to navigation Jump to search
Checked zippy

About

NOTE: This page is a daughter page of: CSS


Collapsible areas or zippies are popup on long pages. Coders love zippies! This zippy I created is pretty minimal on JavaScript, and uses a checkbox such that when you submit a form, it will add "?show-about-salsa=y" using the zippy name for any expanded zippies. This can be useful if you want to save and/or programattically do something with what zippies are expanded when the page refreshes.


Collapsible Zippy

This is a CSS + HTML + Javascript only solution for zippies which use checkboxes.


<!doctype html>
<html lang="en">
<head>
  <title>Collapsible Zippy</title>
  <style>

/**
 * Special 'zippy' class which must be used as follows:
 *   <div class="zippy">
 *     <input type="checkbox" name="show-about-zouk" class="zippy-checkbox" value="y">
 *     <label class="zippy-checkbox-label" for="show-about-zouk">About Zouk</label>
 *     <div class="zippy-content">
 *       First zippy here... we did not set 'checked' to the 'zippy-checkbox' so it will be closed by default.
 *     </div>
 *   </div>
 */
.zippy-checkbox {
  display: none;
  color: #4285f4;
  margin-top: 3px;
}
.zippy-checkbox input {  /* Hide the browser's default checkbox. */
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
.zippy-checkbox + label:before,
.zippy-checkbox + label span.sg-icon-target:before
{
  padding-left: 3px;
  padding-right: 5px;
  content: "\2191";
  color: #4285f4;
}
.zippy-checkbox:checked + label:before,
.zippy-checkbox:checked + label span.sg-icon-target:before
{
  padding-left: 3px;
  padding-right: 5px;
  content: "\2193";
  color: #4285f4;
}

.zippy-checkbox-label {
  color: #4285f4;
  cursor: s-resize;
}
.zippy-checkbox-label:hover {
  background-color: #e8f1ff;
}
.zippy-content {
  padding-left: 5px;
  margin-left: 5px;
  border-left: 2px solid #cbcbcb85;
  margin-top: 3px;
  margin-bottom: 8px;
}

  </style>
</head>
<body>
  <form>

  <div class="zippy">
    <input type="checkbox" name="show-about-zouk" class="zippy-checkbox" value="y">
    <label class="zippy-checkbox-label" for="show-about-zouk">About Zouk</label>
    <div class="zippy-content">
      First zippy here... we did not set 'checked' to the 'zippy-checkbox' so it will be closed by default.
    </div>
  </div>

  <div class="zippy">
    <input type="checkbox" name="show-about-salsa" class="zippy-checkbox" value="y" checked>
    <label class="zippy-checkbox-label" for="show-about-salsa">About Salsa</label>
    <div class="zippy-content">
      First zippy here... we added 'checked' to the 'zippy-checkbox' to make it open by default.

      <div class="zippy">
        <input type="checkbox" name="show-about-salsa-on-2" class="zippy-checkbox" value="y" checked>
        <label class="zippy-checkbox-label" for="show-about-salsa-on-2">About Salsa on 2</label>
        <div class="zippy-content">
          Nested Zippy here.
        </div>
      </div>
    </div>
  </div>

  <br>
  <input type="submit" value="Submit (notice URL change)">
  </form>
</body>

<script>
  // Code for "zippy" areas:
  let zippies = document.getElementsByClassName("zippy");
  for (let i = 0; i < zippies.length; i++) {
    let zippy = zippies[i];
    console.log(zippy);
    // Add listener to toggle contents when zippy is checked: 
    zippy.children[1].addEventListener("click", function () {
      let checkbox = this.parentElement.children[0];
      let label = this;
      let content = this.parentElement.children[2];
      checkbox.checked = !checkbox.checked;
      content.style.display = (checkbox.checked) ? "block" : "none";
      label.style.cursor = (checkbox.checked) ? "n-resize" : "s-resize";
    });
    // Expand any collapsible elements already marked as "active":
    zippy.children[2].style.display = (zippy.children[0].checked) ? "block" : "none";
    zippy.children[1].style.cursor = (zippy.children[0].checked) ? "n-resize" : "s-resize";
  }
</script>
</html>


See Also

  • CSS - Collapsible Zippy - Very similar to this one in JavaScript, but a little lighter on HTML (it doesn't use checkboxes).
  • JavaScript - Zippy - Is a little more involved than this example, but has plus and minus images at the start.


Links