{"id":33946,"date":"2019-03-04T09:23:32","date_gmt":"2019-03-04T09:23:32","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33946"},"modified":"2020-12-24T07:22:38","modified_gmt":"2020-12-24T07:22:38","slug":"expand","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/expand\/","title":{"rendered":"Expand"},"content":{"rendered":"
\n\t
\n\t\t
\n
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.<\/div>\n
Show more<\/span><\/a><\/div>\n
Show less<\/span><\/a><\/div>\n<\/div>\n\t<\/div>\n\t
\n\t\t
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.<\/div>
"Show<\/span><\/a><\/div>
"Show<\/span><\/a><\/div><\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n
Table of contents<\/p>\n\n
  1. Description<\/a><\/li>
  2. Options<\/a><\/li>
  3. Examples<\/a>
    1. Basic example<\/a><\/li>
    2. Revealing hidden content<\/a><\/li><\/ol><\/li><\/ol><\/li><\/ol>\n\n\n
      Description<\/h2>\n\n\n\n
      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.<\/p>\n\n\n\n
      Options<\/h2>\n\n\n\n
      Option name<\/th>Possible values<\/th>Default value<\/th><\/tr>
      more_text<\/strong>
      Enter the text for more link<\/small><\/td>      		Any text value<\/td>Show more<\/td><\/tr>
      less_text<\/strong>
      Enter the text for less link<\/small><\/td>      		Any text value<\/td>Show less<\/td><\/tr>
      height<\/strong>
      Height for collapsed state (in pixels)<\/small><\/td>      		Number from 0 to 1000<\/td>100<\/td><\/tr>
      hide_less<\/strong>
      This option allows you to hide less link, when the text block has been expanded<\/small><\/td>      		yes or no<\/td>no<\/td><\/tr>
      text_color<\/strong>
      Pick the text color<\/small><\/td>      		#HEX color<\/td>#333333<\/td><\/tr>
      link_color<\/strong>
      Pick the link color<\/small><\/td>      		#HEX color<\/td>#0088FF<\/td><\/tr>
      link_style<\/strong>
      Select the style for more\/less link<\/small><\/td>      		default (Default)
      underlined (Underlined)
      dotted (Dotted)
      dashed (Dashed)
      button (Button)<\/td>      		default<\/td><\/tr>
      link_align<\/strong>
      Select link alignment<\/small><\/td>      		left (Left)
      center (Center)
      right (Right)<\/td>      		left<\/td><\/tr>
      more_icon<\/strong>
      Add an icon to the more link<\/small><\/td>      		Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star<\/em>, http:\/\/example.com\/icon.png<\/em>. See available Fork Awesome icons<\/a>.<\/td>\u2013 none \u2013<\/em><\/td><\/tr>
      less_icon<\/strong>
      Add an icon to the less link<\/small><\/td>      		Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star<\/em>, http:\/\/example.com\/icon.png<\/em>. See available Fork Awesome icons<\/a>.<\/td>\u2013 none \u2013<\/em><\/td><\/tr>
      class<\/strong>
      Additional CSS class name(s) separated by space(s)<\/small><\/td>      		CSS class name(s) separated by space(s)<\/td>\u2013 none \u2013<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Examples<\/h2>\n\n\n\n
      Basic example<\/h3>\n\n\n\n
      In this example any content under the 20px position will be hidden.<\/p>\n\n\n
      \n\t
      \n\t\t
      \n
       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. <\/div>\n
      Show more<\/span><\/a><\/div>\n
      Show less<\/span><\/a><\/div>\n<\/div>\n\t<\/div>\n\t
      \n\t\t
       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. <\/div>
      Show more<\/span><\/a><\/div>
      Show less<\/span><\/a><\/div><\/div><\/pre>\n\t<\/div>\n<\/div>\n\n\n\n
      Revealing hidden content<\/h3>\n\n\n\n
      The shortcode can be used to reveal a hidden content. The main trick is to set the visible part height to 0<\/code>.<\/p>\n\n\n
      \n\t
      \n\t\t
      \n
       COUPON-CODE <\/span><\/div>\n
      <\/i>Reveal coupon code<\/span><\/a><\/div>\n<\/div>\n\t<\/div>\n\t
      \n\t\t
       COUPON-CODE <\/span><\/div>
      <\/i>"Reveal<\/span><\/a><\/div>
      Show less<\/span><\/a><\/div><\/div><\/pre>\n\t<\/div>\n<\/div>\n","protected":false},"featured_media":36663,"template":"","docs_category":[21],"class_list":["post-33946","docs","type-docs","status-publish","has-post-thumbnail","hentry","docs_category-shortcodes"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/33946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media\/36663"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=33946"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=33946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}