<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>