Collapsible Text Widget

The Collapsible Text widget allows you to condense long sections of text down to just a few lines. Site visitors can expand the collapsed text by clicking a “read more” prompt, or custom text of your choosing. Use this widget to maintain firm control of tidy page designs while keeping important text at the fingertips of your site visitors.

Demo: https://demo.wocode.com/collapsible-text

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

• Drop the widget into your site and place it where you would like the read more text to appear.

WIDGET OPTIONS

 Open the widget option panel.

• Unique ID: Be sure to use unique ID’s when using multiple instances of the widget on the same page.

• Truncate By: Where you will set whether the text is cut of by either a specific word count, or a specific number of characters.

From within each list item, you will find one of these two options:

Number of Words: Set the number of words that are visible before the Read More button is clicked.

Number of Characters: Set the number of characters that are visible before the Read More button is clicked.

• Ellipsis: Controls what is shown at the end of the truncate before the Read More button.

• Animation: Enables or disables the ease in animation that occurs when the read more block is opened/closed.

• Animation Duration (ms): Sets the speed of the animation.

• Auto Overflow Before Animation: Forces an overflow on the animation, this is useful when there is any small jumping occurring with the animation.

• Read More Blocks: Add the text that will be visible in the widget into list items here. You can have a single block of text, or multiple blocks of text.

• Read More Button Label: This allows you to change the text that is shown for the read more button when the text is collapsed.

• Read Less Button Label: This allows you to change the text that is shown for the read less button when the text is expanded.

DESIGN SETTINGS

There are numerous options that allow you to style text and labels. These settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory. However, there are a few key settings that should be noted:

Widget Vertical Padding (px): Applies top and bottom padding to the widgets container.

Widget Horizontal Padding (px): Applies left and right padding to the widgets container.

Within the Read More Block Styling you will find the styling for the content blocks.

• Block Vertical Margin (px): Applies a top margin to each Read More Block.

• Block Horizontal Margin (px): Applies a left and right margin to the widget’s container.

• Block Vertical Padding (px): Applies top and bottom padding to each Read More Block.

• Block Horizontal Padding (px): Applies left and right padding to each Read More Block.

Within the Button Styling you will find the styling for the read more and read less button. Both of these buttons will share the same style.

• Inline Button: This option when enabled will place the button inline with the end of the text. This is the opposite of the default behavior which is that the button will be displayed beneath the text on its own line.

• Button Vertical Padding (px): Applies top and bottom padding to the Read More button.

• Button Horizontal Padding (px): Applies left and right padding to the Read More button.