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.

[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]
Option name Possible values Default value
more_text
Enter the text for more link
Any text value Show more
less_text
Enter the text for less link
Any text value Show less
height
Height for collapsed state (in pixels)
Number from 0 to 1000 100
hide_less
This option allows you to hide less link, when the text block has been expanded
yes or no no
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
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

none

less_icon
Add an icon to the less link
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

none

class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none