<pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!--
https://jsbin.com/tuticinojo/1/edit?html,css,output
--&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;Pure CSS Interactions Demo&lt;/title&gt;
    &lt;style&gt;
      body {
        font-family: sans-serif;
        padding: 2rem;
        background: #f9fafb;
        color: #111;
        line-height: 1.5;
      }

      h2 {
        margin-top: 2rem;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.5rem;
      }

      /* === ACCESSIBLE FOCUS STYLE === */
      button,
      .menu-btn,
      .open-modal,
      .close,
      .accordion label {
        outline: none;
      }
      button:focus,
      .menu-btn:focus,
      .open-modal:focus,
      .close:focus,
      .accordion label:focus {
        outline: 2px solid #2563eb;
        outline-offset: 3px;
      }

      /* === TOGGLE SWITCH === */
      .switch {
        display: inline-block;
        position: relative;
        width: 50px;
        height: 25px;
      }

      .switch input {
        display: none;
      }

      .slider {
        background: #ccc;
        border-radius: 25px;
        position: absolute;
        inset: 0;
        cursor: pointer;
        transition: 0.3s;
      }

      .slider::after {
        content: "";
        width: 21px;
        height: 21px;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: 2px;
        transition: 0.3s;
      }

      .switch input:checked + .slider {
        background: #4ade80;
      }

      .switch input:checked + .slider::after {
        transform: translateX(25px);
      }

      /* === DROPDOWN MENU === */
      .menu-btn {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #111;
        color: white;
        border-radius: 5px;
      }

      #menu-toggle {
        display: none;
      }

      .menu {
        margin-top: 0.5rem;
        background: white;
        border: 1px solid #ddd;
        padding: 0.5rem;
        border-radius: 5px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      #menu-toggle:checked + .menu {
        max-height: 300px; /* enough space */
      }

      /* === MODAL === */
      .open-modal {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #2563eb;
        color: white;
        border-radius: 5px;
      }

      #modal-toggle {
        display: none;
      }

      .modal {
        position: fixed;
        inset: 0;
        display: none;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.6);
      }

      #modal-toggle:checked + .modal {
        display: flex;
      }

      .modal-content {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        position: relative;
        max-width: 300px;
        text-align: center;
      }

      .close {
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        padding: 0.5rem 1rem;
        background: #ef4444;
        color: white;
        border-radius: 5px;
      }

      /* === ACCORDION === */
      .accordion label {
        display: block;
        cursor: pointer;
        padding: 0.5rem;
        background: #f3f4f6;
        margin-top: 0.5rem;
        border-radius: 5px;
      }

      .accordion input {
        display: none;
      }

      .accordion .content {
        max-height: 0;
        overflow: hidden;
        padding: 0 0.5rem;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: max-height 0.3s ease;
      }

      .accordion input:checked + label + .content {
        max-height: 200px;
        padding: 0.5rem;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Pure CSS Interactions Demo&lt;/h1&gt;

    &lt;h2&gt;1. Toggle Switch&lt;/h2&gt;
    &lt;label class="switch"&gt;
      &lt;input type="checkbox" aria-label="Toggle setting" /&gt;
      &lt;span class="slider"&gt;&lt;/span&gt;
    &lt;/label&gt;

    &lt;h2&gt;2. Dropdown Menu&lt;/h2&gt;
    &lt;label for="menu-toggle" class="menu-btn" role="button" aria-expanded="false" aria-controls="menu"&gt;Menu&lt;/label&gt;
    &lt;input type="checkbox" id="menu-toggle" /&gt;
    &lt;ul id="menu" class="menu"&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li&gt;About&lt;/li&gt;
      &lt;li&gt;Contact&lt;/li&gt;
    &lt;/ul&gt;

    &lt;h2&gt;3. Modal&lt;/h2&gt;
    &lt;label for="modal-toggle" class="open-modal" role="button"&gt;Open Modal&lt;/label&gt;
    &lt;input type="checkbox" id="modal-toggle" /&gt;
    &lt;!-- modal closes when background clicked --&gt;
    &lt;label for="modal-toggle" class="modal"&gt;
      &lt;div class="modal-content" role="dialog" aria-modal="true"&gt;
        &lt;h3&gt;Hello&lt;/h3&gt;
        &lt;p&gt;This modal works without JS.&lt;/p&gt;
        &lt;label for="modal-toggle" class="close" role="button"&gt;Close&lt;/label&gt;
      &lt;/div&gt;
    &lt;/label&gt;

    &lt;h2&gt;4. Accordion&lt;/h2&gt;
    &lt;div class="accordion"&gt;
      &lt;input type="checkbox" id="q1" /&gt;
      &lt;label for="q1" aria-controls="a1" aria-expanded="false"&gt;Question 1&lt;/label&gt;
      &lt;div class="content" id="a1"&gt;Answer to question 1.&lt;/div&gt;

      &lt;input type="checkbox" id="q2" /&gt;
      &lt;label for="q2" aria-controls="a2" aria-expanded="false"&gt;Question 2&lt;/label&gt;
      &lt;div class="content" id="a2"&gt;Answer to question 2.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>