An accessible toggle component that reveals or hides content when a button is clicked. It provides
keyboard navigation, proper ARIA attributes, and screen reader support. The toggle maintains the
correct expanded/collapsed state, announces changes to screen readers, and can be customized with
animations and responsive behavior. This simple show/hide pattern ensures content is accessible to
all users regardless of how they interact with the page.
Default
The Toggle component is a button that triggers changes on a specified item when you click it.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis deserunt veniam
perferendis recusandae sunt quasi, dolor laboriosam quibusdam saepe numquam officia,
incidunt fugiat amet velit quas doloribus earum nostrum ut?
Toggle button with jQuery like slide animation
A smooth slide animation that reveals or hides content when a button is clicked.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis deserunt veniam
perferendis recusandae sunt quasi, dolor laboriosam quibusdam saepe numquam officia,
incidunt fugiat amet velit quas doloribus earum nostrum ut?
Toggle button with an alert box
A button that triggers an alert box when clicked.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis deserunt veniam
perferendis recusandae sunt quasi, dolor laboriosam quibusdam saepe numquam officia,
incidunt fugiat amet velit quas doloribus earum nostrum ut?
Toggle button but only for < 1024px devices
The toggle button will only be visible on devices with a width of less than 1024px.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis deserunt veniam
perferendis recusandae sunt quasi, dolor laboriosam quibusdam saepe numquam officia,
incidunt fugiat amet velit quas doloribus earum nostrum ut?
Toggle button but it's already opened
The toggle button will be opened by default.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis deserunt veniam
perferendis recusandae sunt quasi, dolor laboriosam quibusdam saepe numquam officia,
incidunt fugiat amet velit quas doloribus earum nostrum ut?
Closed on blur
The toggle button will be closed when it loses focus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis deserunt veniam
perferendis recusandae sunt quasi, dolor laboriosam quibusdam saepe numquam officia,
incidunt fugiat amet velit quas doloribus earum nostrum ut?