A "disclosure" web component using Polymer and WAI-ARIA

A simple web component for showing and hiding content. You just supply some content inside the <disclosure-widget> element and a "summary" as a value of its summary attribute. The shadow DOM takes care of the markup, encapsulated styling and WAI-ARIA state changes.

In practise:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque lectus at convallis placerat. Curabitur et nunc est. Sed non consequat dolor, nec consequat risus. In auctor, lacus vel ultricies pulvinar, nulla augue interdum velit, nec imperdiet risus eros vitae ligula.

This one is open by default, using the open boolean attribute.

It doesn't matter what content you include inside <disclosure-widget>. Here's an image:

angry crab

Basic usage


<disclosure-widget summary="Some info">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque lectus at convallis placerat. Curabitur et nunc est. Sed non consequat dolor, nec consequat risus. In auctor, lacus vel ultricies pulvinar, nulla augue interdum velit, nec imperdiet risus eros vitae ligula.</p>
</disclosure-widget>
      

Open by default (using the open attribute)


<disclosure-widget summary="More info" open>
  <p>Duis sagittis lacus lacus, eu iaculis nulla fermentum non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam tempus erat risus, sit amet molestie arcu commodo non. Suspendisse tincidunt sem vitae erat aliquam ornare.</p>
</disclosure-widget>