jquery.contenttoggle

General

This is a page listing some examples for the jquery.contenttoggle plugin.

More informations about the plugin on the GitHub project page.

Simple Examples

Accordion example #1

Simplest example using the default configuration.

See the Pen jQuery contentToggle - Accordion example #1 by Tony Cabaye (@tonai) on CodePen.

Accordion example #2

Same example with the independent option to true.

We also use the toggleOptions.duration option allowing JS animation of the height property (default).

See the Pen jQuery contentToggle - Accordion example #2 by Tony Cabaye (@tonai) on CodePen.

Tabs example #1

Here is a basic example of a tabs menu.

Contents are outside of each elements so we need to use the contentSelectorContext option to false.
Then use the data option data-content-selector on each elements to link the associated content.

The beforeCallback option is used to prevent the current tab to be closed by a user action in order to always have an opened tab.

Note : The plugin initialize the default state automaticaly based on the content visibility, so we have removed the is-hidden class on the first content.
You can also use the defaultState or data-default-state option for that.

See the Pen jQuery contentToggle - Accordion example #2 by Tony Cabaye (@tonai) on CodePen.

Menu example #1

Make a simple menu by using the globalClose option

Closes the open menu by clicking outside of the menu.

See the Pen jQuery contentToggle - Menu example #1 by Tony Cabaye (@tonai) on CodePen.

Menu example #2

Simple menu with classic CSS :hover display for desktop.

In this case the plugin is useful for compatibility with touch devices and for accessibility.
You can try it by navigating with tab and open/close menu with enter or space or by using a touch device.

To keep the CSS hover functional we need to avoid the menu to open itself, if it has already been opened with CSS.
For that we use the beforeCallback option.

We also use the toggleOptions.complete option to be remove the display:none style added by jQuery.
Because if you don't, you will have problems when opening the menu with the keyboard and then trying to hover the menu.
This can also be fixed by using the following !important CSS declaration :

.no-touch .menu__item:hover > .menu__content {
  display: block !important;
}

But the use of !important is not recommended and it also give me an an opportunity to show you this option.

Note : The toggleOptions option is a JavaScript Objects so you will need to redeclare the toggleOptions.duration option if you don't want animations (because of the merging mechanism).
By default this option is set to 400(ms) by the jQuery [animate][http://api.jquery.com/animate/] function, which is overridden by the contentToggle plugin to 0.

See the Pen jQuery contentToggle - Menu example #2 by Tony Cabaye (@tonai) on CodePen.

Advanced Examples

Accordion example #3

Another accordion example with a summary and buttons that controls the contentToggle items.

For that we simply trigger the open or close events.

Note : We use the contentSelector option with a + to select the next sibling element as content.
This is possible because the contentSelectorContext option is set to true (by default), thus the main element (.js-contentToggle in this example) is used as start point for evaluating the selector.

See the Pen jQuery contentToggle - Accordion example #3 by Tony Cabaye (@tonai) on CodePen.

Tabs example #2

This is a tabs menu that transforms to accordions on small devices.
Try it by resizing your browser.

Like the content, the accordion triggers are outside the main element, so we use the triggerSelectorContext option to false and the data-content-selector data option to link them together.
As you can see you can have multiple triggers for each elements.

See the Pen jQuery contentToggle - Tabs example #2 by Tony Cabaye (@tonai) on CodePen.

Menu example #3

This is an example of a 2 level deep navigation menu.

For that we need to have two groups of instances :

• The first level items
• The second level items

But as you can see in the code, we use exactly the same options for both.
This is possible by using the > selector, allowing to select only direct children.

We have also set a toggleOptions.duration to enable animation.
But we change the toggleProperties option to use more relevant CSS properties in this animation.

See the Pen jQuery contentToggle - Menu example #3 by Tony Cabaye (@tonai) on CodePen.

Mobile menu example

Example of a mobile menu with a "burger" switch.

We have here completely desactivated the JavaScript toggling of the content by setting the toggleProperties option to an empty array [].
We use the is-open class added by the plugin to build our animations only with CSS transition.
As the menu is not hidden, but only pushed away ($('.menu').is(':visible'); returns true), we use the defaultState option to close to force the default state of the plugin.

See the Pen jQuery contentToggle - Mobile menu example by Tony Cabaye (@tonai) on CodePen.