Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Toggle-tip</h1>

  <p>
    Disclosures can act as a form of toggle-tip, making content available to screen readers before activation (such as via <code>aria-describedby</code>) or by activating the control. You want to pay attention to window size and content length while also not clipping content. If there is no interactive content, then the entire container must be able to accept focus so a keyboard-only user can scroll to see it all. Probably allow it to dismiss on <kbd>Esc</kbd> and on any tap/click outside the area (this example does the former, not the latter).
  </p>

  <div>
    <button type="button" id="btnDisc04" aria-expanded="false" onclick="toggleDisclosure(this.id);" aria-labelledby="btnDisc04_info Disclosure04" aria-describedby="Disclosure04" aria-controls="Disclosed04">
      ?
      <span id="btnDisc04_info" class="visually-hidden">More info about</span>
    </button>
    <span id="Disclosure04">The Battle of Hastings</span>
    <div id="Disclosed04" class="disclosee" role="region" aria-describedby="Disclosure04" tabindex="0">
      <p>
        Fought on 14 October 1066 between the Norman-French army of William, the Duke of Normandy, and an English army under the Anglo-Saxon King Harold Godwinson, beginning the Norman conquest of England. It took place approximately 7 miles (11 kilometres) northwest of Hastings, close to the present-day town of Battle, East Sussex, and was a decisive Norman victory.
      </p>
      <p>
        The background to the battle was the death of the childless King Edward the Confessor in January 1066, which set up a succession struggle between several claimants to his throne. Harold was crowned king shortly after Edward's death, but faced invasions by William, his own brother Tostig, and the Norwegian King Harald Hardrada (Harold III of Norway). Hardrada and Tostig defeated a hastily gathered army of Englishmen at the Battle of Fulford on 20 September 1066, and were in turn defeated by Harold at the Battle of Stamford Bridge five days later. The deaths of Tostig and Hardrada at Stamford Bridge left William as Harold's only serious opponent. While Harold and his forces were recovering, William landed his invasion forces in the south of England at Pevensey on 28 September 1066 and established a beachhead for his conquest of the kingdom. Harold was forced to march south swiftly, gathering forces as he went.
      </p>
      <p>
        The exact numbers present at the battle are unknown; modern estimates are around 10,000 for William and about 7,000 for Harold. The composition of the forces is clearer; the English army was composed almost entirely of infantry and had few archers, whereas only about half of the invading force was infantry, the rest split equally between cavalry and archers. Harold appears to have tried to surprise William, but scouts found his army and reported its arrival to William, who marched from Hastings to the battlefield to confront Harold. The battle lasted from about 9 am to dusk. Early efforts of the invaders to break the English battle lines had little effect; therefore, the Normans adopted the tactic of pretending to flee in panic and then turning on their pursuers. Harold's death, probably near the end of the battle, led to the retreat and defeat of most of his army. After further marching and some skirmishes, William was crowned as king on Christmas Day 1066.
      </p>
      <p>
        There continued to be rebellions and resistance to William's rule, but Hastings effectively marked the culmination of William's conquest of England. Casualty figures are hard to come by, but some historians estimate that 2,000 invaders died along with about twice that number of Englishmen. William founded a monastery at the site of the battle, the high altar of the abbey church supposedly placed at the spot where Harold died.
      </p>
    </div>
  </div>

<p>
  Yanked from my <a href="https://codepen.io/aardrian/pen/dyowpJj?editors=0100" target="_top">Disclosure Widgets</a> pen, used in my <a href="https://adrianroselli.com/2020/05/disclosure-widgets.html#Other" target="_top">Disclosure Widgets</a> post.
</p>
              
            
!

CSS

              
                body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  /*   line-height: 1.5; */
  /*   letter-spacing: 0.12em; */
  /*   word-spacing: 0.16em; */
}

main {
  margin: 0 auto;
  max-width: 60em;
}

code, pre, kbd {
  color: #006000;
  font-family: 'Consolas', 'Andale Mono', 'Lucida Sans Typewriter', 'Courier New', 'Roboto Mono', Courier, monospace;
    font-weight: normal;
    font-variant-ligatures: none;
}

kbd {
    border: .07em solid #aaa;
    border-radius: 0.3em;
    box-shadow: 0.1em 0.2em 0.2em rgba(0,0,0,.25);
    background-color: #f9f9f9;
    background-image: linear-gradient(to bottom, #eee, #f9f9f9, #eee);
    padding: 0.1em 0.3em;
    font-size: 80%;
    color: #000;
    line-height: 1;
}

*, *::before, ::after {
  box-sizing: border-box;
}

/* All the CSS needed to make it work */

button[aria-expanded="true"] ~ .disclosee {
  display: block;
}

button[aria-expanded="false"] ~ .disclosee {
  display: none;
}

/* END All the CSS needed to make it work */

/* Disclosure Style 4 */

#btnDisc04[aria-expanded] {
  font-size: .8em;
  color: #000;
  font-weight: bold;
  background-color: #ff0;
  padding: 0.3em 0.5em;
  border: 0.1em solid #000;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  transform: rotate(0deg);
}

#btnDisc04[aria-expanded]:hover,
#btnDisc04[aria-expanded]:focus {
  box-shadow: .1em .1em #00f, -.1em -.1em #00f, .1em -.1em #00f, -.1em .1em #00f;
  border-color: #ff0;
  color: #ff0;
  background-color: #333;
}

#Disclosed04 {
  border: .01em solid #666;
  background-color: #fff;
  box-shadow: 0 0 .5em rgba(0,0,0,.4);
  padding: 0 1em;
  position: absolute;
  z-index: 1;
  width: 50vw;
  height: 50vh;
  overflow: auto;
}

/* Method to visually hide something but still */
/* make it available to screen readers */
.visually-hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}
              
            
!

JS

              
                function toggleDisclosure(btnID) {
  // Get the button that triggered this
  var theButton = document.getElementById(btnID);
  // If the button is not expanded...
  if (theButton.getAttribute("aria-expanded") == "false") {
    // Now set the button to expanded
    theButton.setAttribute("aria-expanded", "true");
  // Otherwise button is not expanded...
  } else {
    // Now set the button to collapsed
    theButton.setAttribute("aria-expanded", "false");
  }
}

function closeAllDisclosures() {
  var openDs = document.querySelectorAll("button[aria-expanded]");
  for (var i = 0; i < openDs.length; i++) {
    if (openDs[i].getAttribute("aria-expanded") == "true") {
      openDs[i].setAttribute("aria-expanded", "false");
    }
  }
}

function countChecked(chkName,countID) {
  var strCheckCtrls = document.querySelectorAll("input[name='" + chkName + "']:checked");
  var strCheckCount = document.getElementById(countID);
  strCheckCount.innerText = strCheckCtrls.length;
}

document.onkeydown = function(evt) {
   if (evt.keyCode == 40 || evt.keyCode == 39) {
    kbdThruChecks("D05", "down");
  } else if (evt.keyCode == 38 || evt.keyCode == 37) {
    kbdThruChecks("D05", "up");
  } else if (evt.keyCode == 36) {
    kbdThruChecks("D05", "home");
  } else if (evt.keyCode == 35) {
    kbdThruChecks("D05", "end");
  } else if (evt.keyCode == 27) {
    closeAllDisclosures();
  }
};

function kbdThruChecks(chkName, dir, evt) {
  try {
    // Get all the checkboxes
    var strCheckCtrls = document.querySelectorAll("input[name='" + chkName + "']");
    var strCheckCtrlsCount = strCheckCtrls.length;
    // Loop through the checkboxes
    for (var i = 0; i < strCheckCtrlsCount; i++) {
      // Get the position of the current checkbox
      var strCheckCtrl = strCheckCtrls[i];
      // If the current checkbox is the active element
      if (document.activeElement == strCheckCtrl) {
        if (dir == "down") {
          if (i + 1 === strCheckCtrlsCount) {
            strCheckCtrls[0].focus();
            // Stop the loop
            break;
          } else {
            strCheckCtrls[i].parentNode.nextElementSibling.firstElementChild.focus();
            // Stop the loop
            break;
          }
        } else if (dir == "up") {
          if (i > 0) {
            strCheckCtrls[i].parentNode.previousElementSibling.firstElementChild.focus();
          } else {
            strCheckCtrls[strCheckCtrlsCount-1].focus();
          }
        } else if (dir == "home") {
            strCheckCtrls[0].focus();
            // Stop the loop
            break;
        } else if (dir == "end") {
            strCheckCtrls[strCheckCtrlsCount-1].focus();
            // Stop the loop
            break;
        }
      }
    }
  } catch (e) {
    console.log("kbdThruChecks(): " + e);
  }
}

// attach focusout listener to the parent of both the disclosure button and its disclosed content
// var subNavContainers = Array.prototype.slice.call(document.querySelectorAll('.discWrapper'));
// subNavContainers.forEach(function(discContainer) {
//   discContainer.addEventListener('focusout', closeAllDisclosures);
// });
              
            
!
999px

Console