jQuery Tabs & Toggles

Adding popular modern jQuery effects couldn’t be easier now with built in shortcode support for jQuery tabs and toggle boxes.
jQuery Toggle Content Shortcodes

Creating toggle content like those seen below couldn’t be easier with the use of our toggle shortcodes. All you have to do is select “Toggle” from the Style tab in the InFocus WYSIWYG popup, enter a title, and some content. They’re also great for FAQ’s! Check out an implementation here: #link

Minimalist Toggle Style

Nunc dignissim est

Quisque aliquam. Nunc iaculis suscipit. Dignissim convallis. Donec faucibus.

Nullam dignissim convallis est

Nullam volutpat convallis. Nunc iaculis suscipit dui

Framed Toggle Style

Nullam dignissim est

Dignissim convallis mi. Nam sit amet dui?

Quisque iaculis est dui

// Minimal Toggle Style
	[toggle title="Toggle Title"]Insert your text here[/toggle]
// Framed Toggle Style
	[toggle_framed title="Toggle Title"]Insert your text here[/toggle_framed]
Top
jQuery Minimalist Arrow Tabs

Now you can create elegant minimalist arrow tabs like the ones used for the blog’s comments and recent and related post modules. Check out the implementation here: Blog Comments

This is the first tab

Vestibulum eu lorem elit. Donec porta vulputate sem, sed interdum ligula semper quis. Pellentesque sollicitudin condimentum nisl, in euismod augue vestibulum feugiat.

This is the second tab

You can put anything in here… Below is a checklist for example…

  • Check list item #1
  • Check list item #2
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem, scelerisque aliquet odio lorem non orci.
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem.
  • Scelerisque aliquet odio lorem non orci.

Tab content 3 

	[minimal_tabs tab1="Tab 1" tab2="Tab 2" tab3="Tab 3"]
		[tab]Tab content 1[/tab]
		[tab]Tab content 2[/tab]
		[tab]Tab content 3[/tab]
	[/minimal_tabs]
jQuery Framed Tabs

Vestibulum eu lorem elit. Donec porta vulputate sem, sed interdum ligula semper quis. Pellentesque sollicitudin condimentum nisl, in euismod augue vestibulum feugiat. Quisque sem elit, faucibus at rutrum a, iaculis ut nunc. Nulla facilisi. Aenean convallis nulla semper nisl vestibulum lobortis? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam molestie aliquam porta. Nunc justo enim, convallis sit amet placerat quis, suscipit vel erat. Sed leo ligula, vulputate at hendrerit id, lacinia at sapien. Aenean venenatis elementum interdum. Mauris non sed.

This is the second tab

You can put anything in here… Below is a checklist for example…

  • Check list item #1
  • Check list item #2
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem, scelerisque aliquet odio lorem non orci.
  • Nullam dignissim convallis est.
  • Proin porttitor; sem in ultrices suscipit, diam odio volutpat lorem.
  • Scelerisque aliquet odio lorem non orci.

Third slide content 3

	[framed_tabs tab1="Tab 1" tab2="Tab 2" tab3="Tab 3"]
		[tab]Tab content 1[/tab]
		[tab]Tab content 2[/tab]
		[tab]Tab content 3[/tab]
	[/framed_tabs]
Top