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.

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.

 

Hello World

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
 


Our Specialities

Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper.

Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


Working Together

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.



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:
  1. Open your Stacks Library. Drag and drop a copy of the stack into your webpage.
  2. Within the first drop zone, place the content you permanently want shown as the 'summery'. This can be any basic content or stacks.
  3. Then within the second drop zone, place the expanded content that you only want to be shown when the 'read more' link is clicked.
  4. Within the Expander stack settings, you can optionally change the text labels displayed on your 'read more' and 'show less' links.
  5. 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-primary

If 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:

btn

And 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.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.