Stacks4Stacks

Based on the existing free Toggle stack, TogglePlus is a more advanced version with several additional style settings, background colour and image support, no developer attributions in the source code and support for open / close toggle image icons. It's a perfect stack for those who already use and love the existing Toggle stack, but need a bit more power and functionality. It also compliments the Toggle navigation and sidebar structures now used in ThemeFlood RapidWeaver themes for (tablet and mobile support). You can use a single Toggle stack on its own or add multiple in the same page, to create a basic accordion effect.

TogglePlus can be used for displaying many types of different content, including text, columns and images. The stack can either be used in the main content area of a page, or your could use the @import function in PlusKit, to embed TogglePlus stacks within a sidebar, banner or header region of a page. We don't recommend use of any toggle stacks for the display of audio or video, as this content will continue to play after the toggle is closed.

The TogglePlus stack is compatible with all major web browsers, including IE7, IE8, IE9, IE10, Safari, Opera, Chrome and Firefox. The TogglePlus stack works especially well on smaller handheld devices, like the iPhone, iPad and Nexus 7 and is an attractive, safe alternative to light boxes. You can use multiple TogglePlus stacks quite easily on the same page, to create a layout that mimics an accordion layout.


More details about the setup of TogglePlus stacks and linking can be found further down the page. If you have questions about using the TogglePlus stack, please use the support button above. A free demo version is also provided, so you can download the TogglePlus stack and evaluate all the powerful options it has to offer you.

Examples

Setup

1. When installed, drag and drop a TogglePlus stack into your page.
2. Drag and drop a text stack into the top region, to form a toggle title.
3. Drag and drop stacks into the toggle container placeholder. It is possible to use all sorts of different stacks, such as text, images, columns, grids, templates or HTML code.
4. Every TogglePlus stack on the same page must be assigned a unique ID in the stack settings. This ensures each TogglePlus stack will work independently, and you can also link directly to a TogglePlus stack if you want. ID's must be more than one character in length and not contain any spaces or other special characters.
5. Optionally any of the settings which relate to this stack can be customised in the Stack settings.

Print output

Toggle stacks will be shown permanently in 'open mode' when the page is printed or saved as a PDF. So end users will still be able to read the content inside each toggle stack. Additionally, the open / close toggle icons will be hidden from view.

Linking and opening a specific TogglePlus stack from within the same page

Start in edit mode by looking at what ID your TogglePlus stack has been assigned (this is shown below the content region and will read something like "This TogglePlus stack is assigned ID: #myToggle4"). At this point you would know that the ID is 'myToggle4'. The ID should always be different, depending on the ID you assign each TogglePlus stack in the settings. Once you know the ID, it's simply a matter of creating a link with the anchor HREF and class values set to the toggle ID:

<a href="#myToggle4" class="myToggle4">Open TogglePlus4 on this page</a>

Note that the HREF value requires the '#' character, which tells a web browser to jump to that specific point on the page. The ID provided against the class attribute should have the hash (#) character omitted. The above example shows how this is done correctly. You can only trigger a single TogglePlus stack on a page using this method. Now when the page is previewed, you will have a link that looks and works like this:

Open TogglePlus1 on this page

As you can see from this real example, clicking the link jumps the page up to TogglePlus1 and opens it. Plain HTML links may not always be appropriate to use in 'pretty' web pages, so you have the freedom to replace the link text with an image or some other graphic. Or if you are lucky enough to be using a RapidWeaver theme with support for the Bootstrap Toolkit (most ThemeFlood themes do) then you can style the buttons using one of the Bootstrap button designs. The code for a Bootstrap button would look like this:

<a href="#myToggle1" class="myToggle1 btn btn-primary btn-large">Open TogglePlus1 on this page</a>

Which would look and work like this:

Open TogglePlus1

Linking and opening a specific TogglePlus stack from another page

Typically it is the same procedure as discussed above for making a TogglePlus stack open on the same page. But in this example, just take your TogglePlus ID and append it onto the end of a page link like this:

http://www.example.com/groups/index.html#myToggle2

The hash (#) character tells a web browser to jump to that specific part of the page, and then you type in TogglePlus ID. Replace the www.example.com/groups/index.html with your actual website domain name and the page path. These links work in emails, tweets, Facebook and almost anywhere else, when applied to text or images. You can only trigger a single TogglePlus stack on a page using this method.

To try opening a TogglePlus stack from another page, copy the URL shown below:

http://stacks4stacks.com/toggleplus/#myToggle1

Open a new tab or window in your web browser. Paste the URL into the address field and press return. You should find that this page opens, and you are immediately taken to the first TogglePlus example.