The 'read more' and 'read less' text links can be customised to include text or icons of your choosing. Perhaps more importantly, you can allocate unique anchor IDs onto both links, to ensure the top of your summary or detail sections always snaps into view.
In comparison to the ReadMore stack, Expander provides more control over where the dividing point between summary and details content should fall; as opposed to a character count. The aforementioned anchors make Expander better to use for larger or longer blocks of content.
Accessibility and SEO of toggle effects is vitally important. You'll find that the text within Expander is always available for search engines to index. The links to expand or contract the content can be seen by assistive devices and can receive tab focus. If the page is printed or saved as a PDF, all content is shown and the links are hidden.
In comparison to the ReadMore stack, Expander provides more control over where the dividing point between summary and details content should fall; as opposed to a character count. The aforementioned anchors make Expander better to use for larger or longer blocks of content.
Accessibility and SEO of toggle effects is vitally important. You'll find that the text within Expander is always available for search engines to index. The links to expand or contract the content can be seen by assistive devices and can receive tab focus. If the page is printed or saved as a PDF, all content is shown and the links are hidden.
Example
Here is an example of Expander, placed inside a Shady stack. You can see how Expander provides an easy method of toggling the display of larger 'details' section of text. The shadow effect is achieved using Shady.The anchor jump is optional. This is easily disabled in the stack settings if you don't want it. Anchor jumping works better on longer pages with a lot of content.
Setup
IInstall Expander in the normal way, into Stacks and RapidWeaver. Then follow these instructions:- Open your Stacks Library. Drag and drop a copy of the stack into your webpage.
- Within the first drop zone, place the content you permanently want shown as the 'summery'. This can be any basic content or stacks.
- Then within the second drop zone, place the expanded content that you only want to be shown when the 'read more' link is clicked.
- Within the Expander stack settings, you can optionally change the text labels displayed on your 'read more' and 'show less' links.
- Preview the webpage in RapidWeaver, to make sure everything is looking and working as expected.
As always, mousing-over any settings in Expander displays an information tooltip about what it does.
Using multiple Expander stacks on the same webpage
Follow the same setup procedure as above. However you need to give each summary and details section a unique anchor ID. This action ensures that when your 'read more' and 'show less' links are clicked by a user, the webpage scrolls to the correct place.The reason we let you change the 'read more' and 'show less' anchors manually, is to enable you to customise them to anything you want and use terminology synonymous with your existing content. For example, if you were wanting to use Expander to display complex details for a car model, you could allocate anchors of show-vehicle-details and hide-vehicle-details which would probably look better in the address bar.
As always, anchor IDs need to be unique on the webpage (don't use the same ones more than once). IDs are case sensitive. Don't start an ID with a number. Avoid spaces and special characters (use hyphens or underscores in place of spaces). Following these basic rules ensures your anchors will always work reliably and won't cause errors.
Styling links as buttons
This only works reliably in ThemeFlood themes with a framework link Bootstrap. Or using one of our button generator stacks or a third party button generator service. Use the Button Class settings to provide an optional class for the button. These are the ones used by Bootstrap in ThemeFlood themes for rendering a link as a blue button:btn btn-primaryIf you use a button stack that can target the styling of remote buttons or an online button generator, then you can typically change the class to something like this:
btnAnd then enter your CSS code in the Page Inspector > Code > CSS box like this:
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}That will give you brightly coloured buttons, with both normal and rollover states.
