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.

Breaking news!
As requested by several users, TooglePlus now supports totally customisable ID's; no longer prefixed with words like 'toggle'. This gives you the power and flexibility to create attractive anchor links that go directly and open TogglePlus stacks on your page. So instead of having a link like http://example.com/index.html#toggle2, you can now have a more attractive link like this: http://example.com/index.html#latest-promotions.

If after installing the free 1.1.3 update you find that your TogglePlus stacks are not correctly formatted or are triggering, simply whip-open the stack settings in edit and give each one of you TogglePlus stacks a shiny new ID. So if your TogglePlus stack contains something like pictures of cute kittens, give it a new ID of cuteKittens or similar. Then republish the page, and all should be working for you.

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

Click On Me
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. 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.

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.

Close this toggle
Reveal Some Columns
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.
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.
Reveal An Image
Stacks Image 982
Font Awesome More Icons
This example of TogglePlus makes use of Font Awesome icons for open and close buttons. Font Icons have the advantage of being retina-enabled and remain very crisp and sharp on different screens and devices. Options are provided in TogglePlus 1.1.0 and later, allowing you to use any font icons for the open and close buttons. Stack settings are also provided to allow you to customise the icon positioning, margins, size and colour. Brilliant if you are building mobile websites or apps using TogglePlus.


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.