Toggle effects are a popular feature in modern websites, as a method of hiding and revealing blocks of content. The Toggle stack makes use of the jQuery slideToggle function, and a bare minimum of CSS and HTML code. A basic array of settings are provided, to customise aspects of the stack like colours, rounded corners, padding and animation speeds.

Toggle stacks can be used for displaying all sorts of different content types. They can either be used in the main content area of a page, or your could use the @import function in PlusKit, to embed Toggle stacks within a sidebar, banner or header region of a page.

The Toggle stack is compatible with all major web browsers. It can also work on iOS devices like the iPhone and iPad. You can safely use multiple Toggle stacks on the same page, to create a layout that mimics an accordion effect.

The TogglePlus stack was developed as an advanced version of this stack. TogglePlus naturally has significantly more options to customise the style and behaviour of your toggle effects.

Alternatively the ZipList and Switcher stacks deliver other toggle effects, which you may find are better suited to what you want to create. You also have stacks like ReadMore for displaying a summary of text and 'read more' link or button that expands to display the full text.

Examples

We like Toggle stacks
Toggle effects are a popular feature in modern websites, as a method of hiding and revealing blocks of content. The Toggle stack makes use of the jQuery slideToggle function, and a bare minimum of CSS and HTML code. A basic array of settings are provided, to customise aspects of the stack like colours, rounded corners, padding and animation speeds.

The Toggle stack is compatible with all major web browsers, including IE7, IE8, IE9, Safari, Opera, Chrome and Firefox. It can also work on iOS devices like the iPhone and iPad. You can use multiple Toggle stacks on the same page, to create a layout that mimics the Accordion plugin.
A simple block of text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.
Another block of text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.

Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam mattis velit sed odio sollicitudin dapibus. Aenean pellentesque lectus quis quam hendrerit vel rhoncus augue facilisis. Aenean tempus malesuada augue vitae commodo. Etiam sed lorem dolor, et congue mauris. Nullam sit amet erat nisl, ac imperdiet dolor. Donec vel ligula odio. Maecenas pretium leo sit amet libero vulputate molestie in at arcu. Suspendisse potenti. Maecenas pellentesque, dolor id scelerisque vehicula, magna dolor luctus lectus, ut ornare lectus ipsum ut ligula. Aenean ante libero, consectetur vel ultricies quis, feugiat sed lorem. Aenean sollicitudin erat quis massa imperdiet et malesuada dui malesuada. Ut id augue nisi, nec placerat ligula. Sed imperdiet neque eget nibh hendrerit accumsan. In eget dolor sem, quis volutpat urna. Proin tempor nunc vitae felis iaculis bibendum.

Sed lacinia, velit vitae gravida egestas, mauris ipsum varius justo, vitae tincidunt felis erat vitae odio. Aenean lorem orci, rhoncus a tincidunt sed, aliquet vitae odio. Nullam ac quam sit amet lacus posuere molestie in quis sapien. Etiam sed erat massa. Maecenas quis elit a mi pellentesque fringilla. Phasellus id velit arcu. Suspendisse pretium rutrum pulvinar. Donec enim turpis, iaculis nec imperdiet at, suscipit eu mauris. Duis luctus venenatis dolor, sed feugiat eros varius mollis. Nunc tincidunt pharetra lorem non convallis. Nulla consequat luctus enim quis varius.
This toggle starts open as the page loads (click to close it again)
Stacks Image 199
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.

Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam mattis velit sed odio sollicitudin dapibus. Aenean pellentesque lectus quis quam hendrerit vel rhoncus augue facilisis. Aenean tempus malesuada augue vitae commodo. Etiam sed lorem dolor, et congue mauris. Nullam sit amet erat nisl, ac imperdiet dolor. Donec vel ligula odio. Maecenas pretium leo sit amet libero vulputate molestie in at arcu. Suspendisse potenti. Maecenas pellentesque, dolor id scelerisque vehicula, magna dolor luctus lectus, ut ornare lectus ipsum ut ligula. Aenean ante libero, consectetur vel ultricies quis, feugiat sed lorem. Aenean sollicitudin erat quis massa imperdiet et malesuada dui malesuada. Ut id augue nisi, nec placerat ligula. Sed imperdiet neque eget nibh hendrerit accumsan. In eget dolor sem, quis volutpat urna. Proin tempor nunc vitae felis iaculis bibendum.

Sed lacinia, velit vitae gravida egestas, mauris ipsum varius justo, vitae tincidunt felis erat vitae odio. Aenean lorem orci, rhoncus a tincidunt sed, aliquet vitae odio. Nullam ac quam sit amet lacus posuere molestie in quis sapien. Etiam sed erat massa. Maecenas quis elit a mi pellentesque fringilla. Phasellus id velit arcu. Suspendisse pretium rutrum pulvinar. Donec enim turpis, iaculis nec imperdiet at, suscipit eu mauris. Duis luctus venenatis dolor, sed feugiat eros varius mollis. Nunc tincidunt pharetra lorem non convallis. Nulla consequat luctus enim quis varius.
A Toggle stack with its own close button
This toggle stack includes a close button at the bottom, so an end user can easily close the toggled container again. Useful on pages where you have lots or Toggle stacks or in instances where you've added lots of content to the Toggle container. All that you have to do is to setup a new HTML element (a heading, a link or a button) and just give that new element a class name of toggleButton. Here are some example code snippets you could reuse to create different types of close buttons:

<input type="button" value="Close Me!" class="toggleButton" />
<h4 class="toggleButton">Close Me!</h4>
<a href="#" class="toggleButton">Close Me!</a>
<span class="toggleButton">Close Me!</span>
<img src="http://www.example.com/path/to/image.jpg" alt="Close" class="toggleButton" />




Setup

  1. When installed, drag and drop a Toggle stack into your page.
  2. Replace the text "Toggle Title Goes Here" with your own 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. 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.

Linking and opening a specific Toggle stack from another page

New in version 1.1.6, this is quite a nifty trick if you have a set of Toggle stacks on the same page, and you want one to open automatically when a user arrives at the page via a link. When you are in Stacks edit mode, the anchor for the individual Toggle stack is shown like this:

#toggleTrigger_stacks_in_20_page0

The anchor can be taken and appended onto a page link like this...

http://www.example.com/path/to/page/

and becomes...

http://www.example.com/path/to/page/#toggleTrigger_stacks_in_20_page0

So now if you were to enter that full website URL and anchor into the browser address bar, the web browser will take you straight to that page, scroll you down to where the Toggle stack is, and open that particular Toggle stack. This is a great option to use if you want to link to a specific Toggle stack, which might be hosting content like a product or a help article. These links can be used anywhere in your project, and also work from within tweets, emails and anywhere else where hyperlinks are supported.

Note that every Toggle stack you add to a page receives a unique anchor ID automatically by Stacks. You don't have control over the ID assigned to an individual Toggle stack. You do if you use TogglePlus.


Linking and opening Toggle stacks within the same page

Version 1.1.7 now allows jumping to specific Toggle stacks in the same page, and for those Toggle stacks to open automatically. To get this working, type a normal HTML anchor tag in your page like this:

<a href="#toggleTrigger_stacks_in_842_page2" class="toggleTrigger_stacks_in_842_page2">Click Me!</a>

The href="#" and class="" attributes should contain the ID of the Toggle stack you wish to link to and open. Note that the HREF attribute contains a hash character, to denote this link as a page anchor. Again this ID you use is presented in edit mode, for each Toggle stack.

As an example, click this link and you should find you get taken back to the first Toggle stack on this page, and it opens automatically for you (if it is not already open).
 

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.