Disclosure Widget

HTML

<button type="button" aria-expanded="true" class="summary">
    Zusammenfassung
</button>
<p class="details">
    Inhalt
</p>

<output></output>

CSS

.summary {
  display: none;
}

[aria-expanded=false]::before {
  content: "▶ ";
}

[aria-expanded=true]::before {
  content: "▼ ";
}

output {
  display: block;
}

JavaScript

$(function() {
  const $summaries = $('.summary'),
        $output = $('output');

  $summaries.show();
  $summaries.attr('aria-expanded', 'false');

  $('.details').hide();


  $summaries.click(function() {
    const $summary = $(this),
          expanded = $summary.attr('aria-expanded');

    $summary.nextAll('.details').slideToggle();
    $summary.attr('aria-expanded', expanded === 'true' ? 'false' : 'true');


    $output.val(`aria-expanded=${

      $summary.attr('aria-expanded')
    
    }`);
  });
});