HTML5 has a new feature (<details> and <summary> elements) that provides a native disclosure widget. These sections are identified in screen readers. The <summary> element is focusable like a button. Clicking it shows or hides the remaining content inside <details>.

How it looks

image of Collapsible Section example

The code


<details class="journal-content-article">
<summary>Help &amp; Support</summary>
<p>For NYU Google Apps for Education support, read more about <a href="" data-activity-event="Email Google Support">NYU Google Apps</a> or contact the <a href="" data-activity-event="Email ITS Helpdesk">IT Service Desk.</a></p>


.journal-content-article {
max-width: 450px;
maxx-height: 400px;

.journal-content-article summary {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #3698db;
font-family: "Gotham 7r", "Gotham A", "Gotham B";
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
margin-bottom: 0.5em;
margin-top: 0;
padding-top: 2px;
border: none;
border-top: 2px solid #3698db;
cursor: pointer;
line-height: 24px;

For browsers that do not support details/summary, we load a polyfill lib:

<script src="js/details.polyfill.js"></script>.