Details container

back edit

Toggle the content and the button trigger text.

<div class="Details js-details-container bg-gray border rounded-1">
  <div class="p-3">
    <button type="button" class="js-details-target btn-link float-right" aria-expanded="false">
      <span class="Details-content--shown">Expand</span>
      <span class="Details-content--hidden">Collapse</span>
    </button>

    Outdated review comment
  </div>
  <div class="Details-content--hidden bg-white border-top p-3">
    <img src="https://github.com/octocat.png" alt="@octocat" class="avatar float-left mr-2" width="40">
    <strong>@octocat:</strong>
    <p class="mb-0">Add a test for this method.</p>
  </div>
</div>

Use details.Details-element, .Details-content--open, .Details-content--closed to achieve a similar interaction with slight changes in markup without JavaScript.

<details class="Details-element bg-gray border rounded-1">
  <summary class="p-3">
    <span class="Details-content--closed">Expand</span>
    <span class="Details-content--open">Collapse</span>
    outdated review comment
  </summary>
  <div class="p-3 bg-white border-top">
    <img src="https://github.com/octocat.png" alt="@octocat" class="avatar float-left mr-2" width="40">
    <strong>@octocat:</strong>
    <p class="mb-0">Add a test for this method.</p>
  </div>
</details>