Default Example
The Read More element keeps long-form content tidy by collapsing it to a comfortable preview height, then revealing the rest on demand. Visitors see a clean, focused introduction first, which keeps pages short and scannable without hiding anything important from search engines. This default example wraps a standard block of text and adds a styled trigger link at the bottom of the fade, so the layout stays balanced on every screen size. Because the markup is plain HTML enhanced with a single data attribute, you can drop it around any paragraphs, lists, or media you already have. The component measures the content, applies a smooth gradient mask, and toggles the height with a fluid animation that feels natural rather than abrupt, giving readers full control over how much detail they want to explore at once.
Everything is driven by the data-readmore attribute on a wrapping element, so there are no extra scripts to wire up by hand. You can adjust the preview height, the fade, and the trigger labels independently, and the component recalculates on resize so the experience stays consistent across phones, tablets, and desktops without any further configuration from you.
Alternate Trigger Style
This variation swaps the plain text link for a compact chevron icon, proving how flexible the trigger markup really is. Instead of a worded label, a single down arrow invites the reader to expand the passage, then flips to an up arrow once the full content is on screen. It is an ideal pattern for minimal layouts, sidebars, or cards where space is tight and a wordy button would feel heavy. You define both the open and close states directly in the data attributes, so any icon font, SVG, or short phrase can be used without touching a line of script. The collapsed preview still presents a polished fade at its lower edge, and the toggle keeps the surrounding spacing intact as it grows and shrinks, so nearby elements never jump around when a curious visitor decides to read the whole story.
Because the open and close markup accepts any HTML, an icon-only trigger like this needs nothing more than two short snippets in the data attributes. The control stays perfectly centered or aligned to your layout, and the smooth toggle keeps surrounding content stable, making it a tidy solution wherever a full text button would simply take up too much valuable room.
Open Only
The open-only mode is built for content you want expanded but never re-collapsed. Once a reader taps the trigger, the passage unfolds to its full height and the toggle quietly disappears, leaving a continuous, uninterrupted block of text behind. This is perfect for terms, disclosures, or articles where re-hiding the body after someone has committed to reading it would only get in the way. Setting the close label to false is all it takes, and the rest of the behavior, including the smooth reveal animation and the soft gradient preview, works exactly as it does everywhere else. It keeps initial page height short for a quick first impression, yet rewards engaged visitors with the complete passage and a layout that settles cleanly into place the moment the content finishes expanding on the page.
With the close label disabled, the trigger gracefully removes itself after the first interaction, leaving a clean, fully expanded passage. This keeps the reading experience uncluttered for content that only ever needs to open once, and it avoids tempting visitors to collapse text they have already chosen to engage with on the page they are viewing.
Centered Trigger
A centered trigger gives the Read More control a balanced, deliberate look that suits feature blocks and editorial layouts. Rather than sitting flush to the left, the expand link is nudged to the middle of its container, drawing the eye straight to the call to action once the preview fade ends. This small alignment change is handled entirely with a helper class on the trigger, so you keep the same simple data attributes and gain a more symmetrical presentation. It pairs especially well with narrow columns, quotes, and short introductions where a centered button reads as intentional design. The collapse animation and gradient mask behave identically to the default, meaning readers still get a tidy summary up front and a smooth, predictable reveal whenever they choose to view the rest of the content.
The centering is purely presentational, applied through a single helper class on the trigger, so the core behavior is identical to the default example. This makes it easy to mix aligned and centered toggles across a page while keeping a consistent feel, and the smooth animation ensures every block opens and closes with the same polished, predictable motion.
Right Trigger
Aligning the trigger to the right edge is a subtle way to mirror reading direction and tuck the control out of the immediate text flow. The expand link settles against the right side of its column, which works nicely in grids, paired cards, and dashboards where actions traditionally live on that side. As with every other variation, only a single helper class drives the placement, so the underlying behavior, smooth animation, and gradient preview remain completely unchanged. Readers still meet a concise opening passage, and the full content slides into view the moment they ask for it. This layout is a great choice when you want the body copy to feel uninterrupted while still offering a clear, discoverable way to continue, keeping the interface clean and the focus firmly on the words themselves.
Right alignment keeps the control discreet while remaining easy to find at the natural end of the column. It is applied with one helper class and changes nothing about the expand logic, so you can freely combine left, centered, and right triggers throughout a layout while every passage continues to reveal its full content with the same dependable, fluid animation.
Custom Color Mask
A custom color mask lets the fade at the bottom of the collapsed text match any background you place it on. Instead of the default white gradient, you specify an exact color so the preview blends seamlessly into a tinted section, a colored card, or a dark panel without an awkward seam. You can also tune how tall that fade reaches, controlling how much of the lower text gently dissolves before the trigger appears. Both settings live in plain data attributes, so designers can adjust the look without editing scripts or stylesheets. The animation, height calculation, and toggle logic stay exactly the same, meaning the only thing that changes is the visual finish. It is a small touch that makes the Read More element feel native to whatever palette your project uses, keeping every collapsed block perfectly on brand.
Matching the fade to your section color removes any visible seam between the collapsed text and its background, which is essential on tinted or branded panels. Pair the color with a custom fade height to fine-tune exactly how the lower lines dissolve, and the rest of the toggle behavior carries on working precisely as it does in the default configuration.
Custom Height
Setting a custom height decides exactly how much content stays visible before the fold. Rather than relying on a default preview size, you provide a specific value so the collapsed block shows just the right amount of text, whether that is a single tempting line or a fuller introductory paragraph. This is invaluable when you need consistent card heights in a grid or want a very short teaser that nudges readers to expand. The size is defined in a simple data attribute using any CSS unit you like, and everything else, the gradient mask, the smooth toggle, and the icon trigger, continues to work without adjustment. It gives you precise editorial control over the first impression while still keeping the complete passage one click away, so your layouts stay neat and your previews always feel deliberate rather than arbitrary.
A fixed preview height is ideal for keeping cards and columns perfectly aligned in a grid, no matter how much text each one holds. You express the value in any CSS unit, the component handles the measurement and animation for you, and readers always see a clean, consistent teaser before deciding whether to expand the remaining content with a single click.
No Mask
The no-mask variation removes the fading gradient entirely, giving you a hard, clean cut at the collapse point instead of a soft dissolve. This is the right choice when your content sits on a busy background, a photograph, or a textured panel where a color fade would look out of place or impossible to match. The text simply stops at the chosen height and the trigger appears beneath it, keeping the effect crisp and predictable. Disabling the mask takes a single data attribute, and the smooth expand animation along with the worded toggle continues to behave exactly as it does elsewhere. It is a practical, honest presentation for technical documentation, legal copy, or any context where you would rather show a clear boundary than blend the edge, and it keeps the focus squarely on the content.
Without a gradient, the content ends in a clean horizontal line, which is the most honest presentation over photos, patterns, or dark sections where a color fade cannot blend. The trigger still appears neatly beneath the cut, and the expand animation runs exactly as it does elsewhere, so disabling the mask costs you nothing in terms of smoothness or polish.
with Shortcodes
The Read More element is not limited to plain paragraphs; it happily collapses rich content like image galleries, sliders, and other shortcodes too. Here a masonry thumbnail grid sits inside the toggle, so a compact preview row expands into the full gallery on demand, keeping the page short while still giving curious visitors access to every image in the set.
More Variations
Card Style
Wrapping the Read More element inside a card gives long passages a self-contained, elevated home. The rounded corners, soft shadow, and generous padding frame the collapsed preview so it reads as a distinct module rather than loose text on the page. It is a natural fit for feature summaries, profile blurbs, or any block you want to set apart from its surroundings. The trigger sits neatly at the base of the fade, and the smooth expand animation keeps the whole card feeling cohesive as it grows, so the layout never looks broken or unfinished while a reader explores the rest.
Cards work beautifully for collapsing supporting details while keeping a clean summary in view. The padding gives the text room to breathe, the shadow lifts the module off the page, and the rounded corners soften the whole presentation. As the content expands, the card grows smoothly to fit, so the surrounding grid or column stays perfectly composed.
Bordered Style
A bordered container trades the card shadow for a clean outline, giving the collapsed content a crisp, structured edge. The thin rule and comfortable padding define the reading area clearly, which suits forms, notices, and side-by-side comparisons where a flat, framed look reads better than a floating panel. The expand and collapse arrows keep the interaction obvious, and the smooth height animation makes sure the border resizes gracefully around the text. It is an understated style that adds just enough definition to separate the passage from the rest of the page without competing with the content.
The outline keeps things flat and structured, which reads especially well in interfaces that favor clarity over decoration. Padding inside the border gives the text comfortable margins, and the framed edge resizes cleanly as the passage opens, so the bordered block always looks intentional whether it is showing a short teaser or its complete contents.
Left Accent
A left accent bar adds a splash of brand color and an editorial, quote-like feel to the collapsed passage. The colored stripe along the edge and the subtle tinted background draw the eye toward the content while keeping the overall design calm and uncluttered. This treatment shines for highlighted notes, author commentary, or pull-aside explanations that deserve a little extra emphasis. The matching mask color blends the fade into the tinted panel, and the worded trigger expands the text smoothly, so the accent strip stays perfectly aligned as the block opens and closes for the reader.
The accent strip pairs naturally with a tinted background to signal that this passage carries a little extra importance. It is a refined way to highlight notes or commentary without resorting to heavy boxes, and the colored bar stays flush along the edge as the smooth animation expands and collapses the text exactly the way it does everywhere else.
Pill Button Trigger
A rounded pill button turns the Read More trigger into a friendly, tappable control that feels right at home in modern interfaces. The soft, fully rounded shape and tidy padding make the action inviting on both desktop and touch screens, where a generous target is easier to hit. With no icon and a simple worded label, it stays clean and direct, letting the copy do the talking. The pill styling comes entirely from utility classes on the trigger, so the underlying expand behavior and gradient preview remain exactly the same while the button gains a distinctly polished, contemporary personality.
Pill buttons feel modern and approachable, and their generous rounded shape is genuinely easier to tap on small screens. The styling is purely cosmetic, layered on with utility classes, so the trigger keeps the same reliable expand behavior while gaining a softer, friendlier appearance that fits comfortably alongside the rest of your interface controls.
Outline Button Trigger
An outline button trigger offers a lighter, more restrained call to action than a solid fill. The transparent center with a defined border sits comfortably on light backgrounds and inside cards, signalling an action without shouting for attention. Paired with double-chevron icons, the expand and collapse states read clearly at a glance. Because the styling lives in classes on the trigger alone, the smooth animation, height handling, and fade preview all keep working unchanged. It is a versatile, professional look that suits documentation, dashboards, and editorial pages where subtlety is preferred over bold, attention-grabbing buttons.
Outline buttons strike a quiet balance, clearly marking the action without dominating the layout around them. The bordered style sits well on light surfaces and inside cards, and because it is driven entirely by classes, the trigger keeps every bit of its smooth, dependable expand and collapse behavior while presenting a more understated, professional finish.
Gradient Mask
A gradient mask with a custom color and a taller fade creates an especially smooth, refined transition into the collapsed content. By matching the fade to the card background and extending how far it reaches, the lower text dissolves gently rather than cutting off, which feels premium and considered. The minimal dot trigger keeps the control discreet until it is needed, then switches to a clear close icon once expanded. Every setting is a plain data attribute, so you can fine-tune the finish to your palette while the dependable expand animation continues to do its work quietly behind the scenes.
Extending the fade and matching its color to the card produces an unusually graceful transition that feels deliberately crafted. The discreet dot keeps the control out of the way until needed, then becomes an obvious close icon, and the smooth animation ties the whole interaction together so the collapsed and expanded states both look thoroughly considered.
Scroll Up on Close
The scroll-up-on-close option keeps readers oriented by gently returning them to the top of the passage when they collapse it. Without it, closing a long expanded block can leave the viewport stranded far down the page; with it enabled, the view glides back to the start so the next section lines up naturally. It is a thoughtful touch for lengthy articles and stacked toggles where context matters. A single data attribute switches the behavior on, and the smooth expand animation plus the worded trigger continue to operate exactly as they do in every other example here.
Returning to the top on close is a small courtesy that makes long, stacked passages far easier to navigate through. Readers never lose their place when they collapse a section, and because the option is a single data attribute, you can enable it selectively wherever it helps the most while leaving the rest of your toggles to behave in the usual, familiar way.
With Image Header
Pairing a featured image with the Read More element creates a compact article teaser that looks great in feeds and grids. The image anchors the block visually while a short, collapsed excerpt sits beneath it, inviting readers to expand for the full story. A small custom height keeps the preview brief so the image stays the hero, and the arrow trigger makes the call to action obvious. As the passage opens, the smooth animation pushes the content down without disturbing the image above, keeping the whole module tidy and balanced through every interaction on the page.
Keeping the excerpt short lets the featured image lead the module while still hinting at the full story beneath it. When the reader expands the block, the text grows smoothly below the picture without nudging it out of place, so the teaser remains a clean, balanced unit that works equally well in a feed, a sidebar, or a tidy grid of related stories.
Slow Animation Speed
Adjusting the animation speed lets you set the personality of the reveal, and here a deliberately slow timing makes the expansion feel relaxed and graceful. Slower motion can add a sense of weight and polish on hero sections or premium content, drawing attention to the act of unfolding the text. The duration is controlled by a single data attribute measured in milliseconds, so you can dial it anywhere from snappy to leisurely. Everything else, the gradient preview and the centered trigger with its chevrons, behaves just as it does throughout the rest of these examples.
A slower duration suits showcase content where a touch of drama is welcome, while a quicker setting feels brisk and efficient. Because the timing is simply a number that you supply, tuning it to match the mood of any page takes mere seconds, and the gradient preview and trigger continue to work exactly as they do across the other examples shown here.