Stacks4Stacks

ZipList was originally developed by SeyDesign. This stack is now supported and maintained by Stacks4Stacks. The newest version is denoted with an orange and white icon. Legacy versions of ZipList are listed for download from the archive page if you are a previous user needing an older version.

Using a bare-minimum of modern jQuery Javascript, ZipList expands or collapses the contents of each list item on command. ZipList stacks are marked-up as HTML definition lists; so they can boast excellent accessibility and SEO standards. As you would expect ZipList is fully mobile responsive and works reliably in all major web browsers. On print and PDF output, the content is automatically expanded.

You will find ZipList is fast and easy to setup. After all, the emphasis of ZipList is on simplicity, rather than extensive feature sets. However don't let this deter you; in that you'll find ZipList still contains a decent array of customisable options. Support for custom triggers and callbacks really turbo-charge the capabilities of this stack for 'pro' RapidWeaver users.

Example

Here's a real-working example of the ZipList stack in action. Don't forget that you can also download a free demo version above, to experiment with the stack and all its settings on your own computer. The shadow effect is achieved using the free Shady stack.
 

 
ZipList purposefully inherits your theme font face styling and colouring. This ensures the stack can be deployed more quickly and will retain consistent styling with the rest of your website. If you have knowledge of CSS, then there is quite a lot of additional styling you can apply.

Setup

This stack element requires RapidWeaver and the Stacks plugin. It is not compatible with other publishing platforms like Wordpress. Configure ZipList in just a couple of easy steps.

1. Download ZipList. Unzip the package. Drag-and-drop the ZipBar stack onto your RapidWeaver dock icon to install.
2. Follow the onscreen instructions to install ZipList. Restart RapidWeaver if prompted.
3. Open your Stacks Library. Search for ZipList. The latest version has an orange and white icon.
4. Drag a ZipList stack from your Stacks Library onto your Stacks page.
5. Double-click on the 'Item Title (Edit Me)' label to give the ZipList item a title.
6. Drag and drop other stacks into the ZipList item content placeholder and propagate with text and media as needed.
7. Select your ZipList Item in Stacks edit mode and give it a unique ID. IDs must start with a letter and can contain numbers, dashes and underscores. Each ID is unique for each ZipList item and lets you link to ZipList items later on.
8. Add more ZipList Items by clicking the blue button in edit mode.
9. Select the main ZipList stack to make other adjustments to the ZipList behaviour, style and colours. If you mouseover the settings, you will see an informational tooltip about what each one does.

Multiple ZipList stacks can be safely used on the same webpage. You can even nest ZipList stacks inside of each other! The trick to ensuring multiple ZipList stacks can co-exist on the same webpage is to ensure each one has a unique ZipList ID setup in the options. Obviously in nested setups, custom triggers will only work on the 'parent' ZipList.

Triggering a ZipList item via a browser address bar hash

If you want to have a specific ZipList item open when a user arrives on the page, simply set the link from the proceeding location to include a hash (#) character and the ID of the item you want to open like this:

http://example.com/#grapefruit

In this example, the ZipList item with an ID of grapefruit will come into focus and open as the page loads.

Triggering a ZipList item via custom links or buttons

For opening and scrolling a user to a ZipList item on the current page. Give your link or button a new data-ziplist attribute and a value of the item ID you want triggered. If using pure HTML code, you link would look something like this:

<a href="#" data-ziplist="grapefruit">My Link!</a>

If setting this up via the RapidWeaver link dialogue window, open the Custom Attributes pulldown. Click the '+' button and create a new attribute; setting the Name to data-ziplist and the Value to the item ID you want triggered.