Accordian Lists

Part 3: Summary/Details enhanced with javascript.


Summary/Details starting expanded and featuring a JavaScript link to close.

Summary

These are the details, forced to be visible by the open=true attribute.

Details can be closed by clicking the summary heading or by using JavaScript to create a dismiss link, like this one.

Dismiss


Summary/Details one at a time. Opening any one of them will force the others to close, resulting in only one set of details being open at a time.

One

These are the details of summary one. Click on Two or Three and watch everything else close up.

This can be useful on small screen devices to let your users get to what they want without a lot of scrolling.

Two

These are the details of summary two.

Three

These are the details of summary three. And the hidden treasure! 💰


Back | Next