Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards
  • Colours
  • Typography
  • Buttons and links
  • Lists
  • Icons
  • Breakpoints
  • Vertical spacing
  • Hide and show items inclusively
  • Skip link
  • Images
  • Forms
  • Form error messages
  • Tables
  • Blockquotes
  • Details and summary
  • Utility classes
  • Flow elements
  • Print styles

Details and summary

The details element generates a simple no-JavaScript widget to show/hide content, optionally by selecting its child summary element. In non-supporting browsers such as IE11 all content is expanded by default.

This is the summary content

This is the detailed content which is revealed if a user requests to see it.

Considerations

There is currently no way for details to be made to display all of its content by default when printed.

© Studio 24