[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
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.
| 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 | 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 – |
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]
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]