Lux Toggle: Collapsible Library Examples

Simple Toggle!

This is a basic toggle using manual close mode.

  • It doesn't close until you close it manually with the toggle button.
  • Like all lux-toggles it has accessibility, keyboard navigation and animation classes baked in

Auto Closing Toggle!

This is a basic toggle using outside close mode.

  • It closes whenever you click outside the toggle content.
  • Useful for modals and tool tips

Close Button Toggle!

This is a basic toggle using manual close mode - with a manual close button.

  • It doesn't close until you close it manually with the toggle button or by clicking the defined close button in the toggled content
  • Go on try it: close me
  • Useful for modals and menus

Toggle

Button

Group!

This is a toggle group using group close mode.

  • When a member of the group is open and you open another toggle in the group...
  • ...it closes all group members
  • and delays the opening animation to allow group members time to run their closing animation
  • Its useful for navigation, menus and accordians.

NOTE: if you don't need the animation delays, just use outside mode - don't worry about the groupings