Follow

Adding an expandable Read more link

To avoid cluttering your site with too much information, you can hide some of it, allowing your visitors to choose whether to display the hidden information. Typically, the hidden information is displayed by clicking on a Read more link.

In the following example, clicking the Read more/less link...

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/HkkEBkhJmaGPiy37ltUhh_Y44y7pvg4VDgCKsBGll-c/read more link-zY8.png

...displays a hidden paragraph of text.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/TIpl4J8Z5XgNHkZFp944q0xOAdLTI3q73Cc9gT6iYPk/read more link2-4Fw.png

You can use this approach to hide text, graphics, or even video.

Adding an expandable Read more link involves adding HTML5 code.

The HTML5 element used in these instructions is not supported by Microsoft Edge and Microsoft Internet Explorer. On these browsers, the hidden information will always be displayed.

To add an expandable Read more link, follow these steps:

  1. Copy the following code to the clipboard.
    <details>
    <summary>Read more</summary>
    <p>Place your additional text here.</p>
    </details>
  2. Go to Site pages (under the Website menu) and begin editing the site page where you want the link to appear.
  3. Click the Gadgets icon to display the list of available gadgets.
  4. Drag the custom HTML gadget from the Gadget list (not a content gadget), and drop it in the desired location.
  5. After you have inserted the gadget, hover over it and click the Settings icon. https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/JQ6WzZfh8LEtPjG5aJoS96JM4akrclfrpFXCMxviCz4/custom%20html%20settings-fMc.png
  6. Within the gadget settings on the left, click the Edit code button.
    https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/hn2lRYzZ3BbPm3twTLTf882BOhsLEwlkBuOnoI_td2M/edit%20code%20button-CLU.png
  7. In the dialog that appears, paste the code you copied in Step 1.
  8. Edit the code you pasted, replacing the text between the <summary> and </summary> tags with the text you want to be always visible, and replacing the text between the </summary> and </details> tags with the text you want to be initially hidden. For example, the code to display the Read more/less link shown above would be:
    <details>
    <summary>Read more/less</summary>
    <p>The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).</p>
    </details>
  9. Click the Save button to save the changes to the code.
  10. Click the Save button to save changes to your page.

Your page should now appear with the expandable Read more link.

0 Comments

Please sign in to leave a comment.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.