THE WEEKEND SALE

GET ADD-ONS BUNDLE WITH 34% OFF

ONLY 9 HOURS LEFT

GET ADD-ONS BUNDLE – FROM ONLY $39

DISCOUNT CODE APPLIED AUTOMATICALLY

Expand

[su_expand more_text="Show more" less_text="Show less" height="24" text_color="#333333" link_color="#0088FF" link_align="left"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra scelerisque urna, non posuere urna fringilla vel. Sed lorem lacus, lobortis a risus sed, gravida sodales mauris.[/su_expand]

Table of contents

  1. Description
  2. Options
  3. Examples
    1. Basic example
    2. Revealing hidden content

Description

This shortcode allows you to hide text partially and display “Show more” link in the end. Once this link is clicked, the hidden content will be revealed.

Options

Option namePossible valuesDefault value
more_text
Enter the text for more link
Any text valueShow more
less_text
Enter the text for less link
Any text valueShow less
height
Height for collapsed state (in pixels)
Number from 0 to 1000100
hide_less
This option allows you to hide less link, when the text block has been expanded
yes or nono
text_color
Pick the text color
#HEX color#333333
link_color
Pick the link color
#HEX color#0088FF
link_style
Select the style for more/less link
default (Default)
underlined (Underlined)
dotted (Dotted)
dashed (Dashed)
button (Button)
default
link_align
Select link alignment
left (Left)
center (Center)
right (Right)
left
more_icon
Add an icon to the more link
Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star, http://example.com/icon.png. See available Fork Awesome icons.– none –
less_icon
Add an icon to the less link
Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star, http://example.com/icon.png. See available Fork Awesome icons.– none –
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –

Examples

Basic example

In this example any content under the 20px position will be hidden.

[su_expand height="20"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula odio ac arcu bibendum sagittis. Praesent leo felis, faucibus at ipsum quis, cursus pharetra sapien. Nam id placerat risus. Integer consectetur vel dui ac lacinia. [/su_expand]

Revealing hidden content

The shortcode can be used to reveal a hidden content. The main trick is to set the visible part height to 0.

[su_expand more_text="Reveal coupon code" height="0" hide_less="yes" link_style="button" link_color="#4eba00" more_icon="icon: tag"][su_highlight]COUPON-CODE[/su_highlight][/su_expand]
Helpful?
🤝 Thank you!