Results 1 to 1 of 1

Thread: [CSS] Accordion Control

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,887

    [CSS] Accordion Control

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

    HTML
    HTML Code:
    <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
    Code:
    .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.
    Last edited by dday9; Jul 1st, 2024 at 01:40 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width