Text Expander
An inline read-more / reveal toggle — hide part of a sentence or paragraph behind a Show More button. Tabs: Content, Layout, Styling, Animations, Advanced.
A button that reveals hidden content should carry aria-expanded="false" (flipping to "true" once opened) so assistive tech announces whether the content is currently collapsed or open — without it, a screen-reader user has no way to know what pressing it will do. It's also worth keeping the hidden text present in the page's HTML rather than loaded in later, since search engines generally index content that exists in the markup even if it's visually collapsed. UnysonPlus wires up that ARIA state and keyboard support automatically, so both are covered the moment you use this element. MDN: ARIA aria-expanded attribute
Live demo
▶ See the Text Expander live on the demos site — an interactive example you can click through.
Content
Visible Content, Hidden Content, Button Text (Show) (default "Show More"), Button Text (Hide) (default "Show Less").
Layout
| Option | Choices |
|---|---|
| "Show More" Button Location | Image-picker of placements |
| "Show Less" Button Location | Image-picker of placements |
| Merge Boundary Paragraphs | On/Off |
| Show Ellipsis When Collapsed | On/Off |
| Word/Character Count | None, Word count, Character count |
| Click-Anywhere to Expand | On/Off |
Use Native <details> | On/Off (semantic HTML disclosure) |
Styling
| Option | Choices |
|---|---|
| Toggle Icon | None, Chevron (rotates), Plus / Minus |
| Initially Open | On/Off |
| Colors | Visible/Hidden content, Show More/Less buttons (custom hex/rgba) |
Capture the collapsed/expanded states and toggle icons: text-expander-collapsed,
text-expander-expanded, text-expander-chevron.