<details> and <summary>

by jacine

HTML

<form action="#" accept-charset="utf-8">

  <details open="open">
    <summary>Settings</summary>
    <div class="details-content">
      <div class="form-item">
        <label for="edit-name">Username</label>
        <input type="text" id="edit-name" name="name" value="" title="A valid username is required." required="required" />
        <p class="description">Spaces are allowed; punctuation is not allowed except for periods, hyphens, apostrophes, and underscores.</p>
      </div>
      <div class="form-item">
        <label for="edit-mail">E-mail address</label>
        <input type="email" id="edit-mail" name="mail" value="" title="A valid e-mail address is required." required="required" />
        <p class="description">A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</p> 
      </div>
      <fieldset>
        <legend>Status</legend>
        <div class="form-item">
          <input type="radio" id="edit-status-0" name="status" value="0" />
          <label class="option" for="edit-status-0">Blocked </label>
        </div>
        <div class="form-item">
          <input type="radio" id="edit-status-1" name="status" value="1" checked="checked" />
          <label class="option" for="edit-status-1">Active </label>
        </div>
      </fieldset>
    </div>
  </details>

  <details>
    <summary>Administrative Overlay</summary>
    <div class="details-content">
      <div class="form-item form-type-checkbox form-item-overlay">
        <input type="checkbox" id="edit-overlay" name="overlay" value="1" checked="checked" />
        <label class="option" for="edit-overlay">Use the overlay for administrative pages. </label>
        <p class="description">Show administrative pages on top of the page you started from.</p>
      </div>
    </div>
  </details>
  <div...

CSS

article, aside, figure, footer, header, hgroup, 
menu, nav, section {
   display: block;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 81.3%;
  margin: 0 auto;
  max-width: 960px;
  padding: 5%;
}
fieldset,
details {
  margin: 1em 0;
}
legend {
  font-weight: bold;
  text-transform: uppercase;
}
.details-content {
  padding: 1em;
}
.description {
  color: #666;
  font-size: 0.846em;
}