[CSS] Accordion Control

[dday9]

This is a pure HTML and pure CSS accordion control meaning that there is no JavaScript or JQuery involved. Here is the code:

HTML

<input id="toggle-dialog-open" class="toggle-dialog" name="confirm-dialog" type="radio" />
<label for="toggle-dialog-open">Open</label>

<div class="dialog-overlay">
  <dialog>
    <h1>Confirmation Dialog</h1>
    <form id="form-confirm" method="post" action="/do-something">
      <p>Are you sure?</p>
    </form>
    <button form="form-confirm" type="submit">Yes</button>
    <input id ="toggle-dialog-close" class="toggle-dialog" name="confirm-dialog" type="radio" />
    <label for="toggle-dialog-close">No</label>
  </dialog>
</div>

CSS

.toggle-dialog:checked ~ .dialog-overlay,
.toggle-dialog:checked ~ .dialog-overlay dialog {
  display: block;
}

.toggle-dialog,
.toggle-dialog:not(:checked) ~ .dialog-overlay {
  display: none;
}

.toggle-dialog + label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin: 0.2rem;
  border: 1px solid #000;
  background-color: #f0f0f0;
  color: #000;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25em;
  font: -webkit-small-control;
  box-sizing: border-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding-top: 1rem;
}

dialog {
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

Here is a Fiddle: https://jsfiddle.net/n5br3axL/

Notes

1. The way it works is by RadioButtons. When the "open" input is checked then the respective dialog is shown but when the "closed" is checked then the dialog is hidden.
2. Because of this, the "close" input cannot belong in a form since that hijacks the "name" attribute.
3. I deliberately didn't do much styling because theoretically you could apply this to any number of component libraries.