More or Less

Bric By Blocs Builder

Buy Now $14
DetailsSettingsReviews

Keep More. Show Less. 

Create cleaner, more readable layouts while giving visitors complete control over how much content they see.

More or Less is a flexible content expansion Bric for Blocs that lets you collapse long text or mixed media and content, revealing it only when the user needs to see it.

It is perfect for blog excerpts, FAQs, product descriptions, service pages, testimonials, and any layout where too much text can overwhelm the design.

Unlike a basic “Read More” button, More or Less gives you control over how content is revealed, styled, animated, and managed across your website — all without needing custom code.

Flexy Foot 2 logo
More or Less overview

Flexible Content Limits

Choose the method that best suits your content:

  • Word Limit

    Reveal content after a specified number of words.
    Ideal for articles, blog posts, and long-form text.

  • Character Limit

    Reveal content after a specified number of characters.
    Perfect for excerpts, testimonials, and compact layouts.

  • Height Limit

    Collapse content based on a fixed height.
    Ideal for Divs, Groups, Cards, rich content blocks, images, and mixed content layouts.

Works With More Than Just Text

More or Less can be applied to almost any content container.

Use it with:

  • Paragraphs

  • Divs

  • Cards

  • Product Descriptions

  • Service Content

  • FAQ Answers

  • Mixed Content Blocks

Accesibility Focused

Supports keyboard navigation and screen readers to help make your content more accessible.

Optional Fade Overlay

Add a subtle gradient fade to indicate that additional content is available below the visible area.

Smart Scroll Recovery

Automatically returns visitors to a logical reading position when collapsing long content, helping maintain context on longer pages. Including automatic scroll position when Sticky Menus are in use.

What you get!

  • More or Less 

Requirements

  • Blocs 5 / 6

  • Bootstrap 5

Buy Now $14

More or Less Settings

Flexy foot-2__Options_01Flexy foot-2__Options_01Flexy foot-2__Options_01

Setup

  • Class - User definable classes.  Keep the default or set your own to create multiple instances on a page with differnt settings.

  • Type - Choose the limit type by words, characters or by height.

  • H.Min (px) -  The minimum collapsed height in pixels, when using the responsive height type. Note: Only applies when using Responsive Height.

  • Fluid (vw) - Controls how much the collapsed height scales as the viewport becomes wider. Larger values creates more growth.  Works between the min and max height values. Note: Only applies when using Responsive Height.

  • H.Max (px) - The maximum collapsed height. Note: Only applies when using Responsive Height.

  • Limit Count - Define the number of words or characters to be used.

Flexy foot-2__Options_01

Button Text

  • Read More - The text to show on the Read More button.

  • Read Less - The text to show on the Read Less button.

  • Inline Button - Move the Read More and Read Less button inline with the text.  Note: This option disables the Gradient Fade. And is only availble with the Words and Characters limit type.

  • Align -  Positions the button to the left, center or right.

Flexy foot-2__Options_01

Button Icon

  • Show Icons - Toggle icons on and off for the buttons.

  • Icon - Choose an icon set.

  • Position -  Set the icon after or before the button text.

Flexy foot-2__Options_01

Fade Gradient

* Requires the Type set to Responsive Height

  • Show Fade Gradient - Toggle the gradient on and off

  • Start - Select the top colour of the fade gradient.

  • End -  Select the bottom colour of the fade gradient.

  • Height -  The height of the gradient.  Assign a unit with the value.  Eg.  When using repsonsive height px is handy, when using text, em or rem gives you specific control over the height related to the font size.

Flexy foot-2__Options_01

Animation

  • Duration - The legth of time it takes to expand and collapse.

Flexy foot-2__Options_01

Extras

  • Bric Color - Customise the More or Less bric color on the Blocs design canvas. Just cosmetic. 

Styling Classes

More or Less automatically applies the following classes to the toggle button as it changes state. To customise the button appearance, simply create the class in the Blocs Class Manager and apply your desired styling. There is no need to add these classes to elements on the design canvas, as they are applied automatically by the Bric.

  • .ml-button

    Applied to all More or Less buttons, regardless of state. Use this class to define the default appearance of the toggle button.

  • .ml-button-more

    Applied when the content is collapsed and the button is displaying the "More" state.

  • .ml-button-less

    Applied when the content is expanded and the button is displaying the "Less" state.

  • .ml-button-text

    Applied to the text element inside the button.

  • .ml-button-icon

    Applied to the icon element inside the button when icons are enabled.

Tip: In most cases, styling .ml-button is all that is required, as it automatically affects both the More and Less button states.