jQuery Contact Tabs Plugin

jQuery Contact Tabs Plugin – Example 5

The plugin has several built-in functions, which allow you to interact with the Contact Tabs using external links in your web page content.

Toggle Slide-Out Tabs

To create a link, which toggles the slide-out tabs open/closed you can either use the default CSS class “dcjct-toggle” or declare your own using the “classOpen” option in the plugin settings.

Click To Toggle Tabs

<a href="#" class="dcjct-toggle">Click To Toggle Tabs</a>

To control which contact is showing when the tabs open add a “rel” attribute to the link with the index value of the relevant tab – dont forget that index values start at 0 – i.e. 1st tab = 0, 2nd tab = 1, etc:

Toggle & Open Tab 2

<a href="#" class="dcjct-toggle" rel="1">Toggle & Open Tab 2</a>

If no rel attribute is used the plugin will use the “start” value from the settings.

Close Slide-Out Tabs

To close the slide-out tabs use either the default CSS class “dcjct-close” or declare your own via the “classClose” option in the plugin settings.

Click To Close Tabs

<a href="#" class="dcjct-close">Click To Close Tabs</a>

Open Slide-Out Tabs

To open the slide-out tabs use either class “dcjct-open” or declare your own via the “classOpen” option.

Click To Open Tabs

<a href="#" class="dcjct-open">Click To Open Tabs</a>

As with the toggle class you can use the “rel” attribute to specify which tab should be active:

Open Tab 2

<a href="#" class="dcjct-open" rel="1">Open Tab 2</a>

Change Active Tab

To change the active tab use class “dcjct-slide” or declare your own via the “classSlide” option.

This option uses the “rel” attribute to specify which tab should be active. The tabs will automatically open if closed with the dcjct-slide link is clicked.

Navigate between tabs via the links below:

Go To Tab 1

<a href="#" class="dcjct-slide" rel="0">Open Tab 1</a>

Go To Tab 2

<a href="#" class="dcjct-slide" rel="1">Open Tab 2</a>

Go To Tab 3

<a href="#" class="dcjct-slide" rel="2">Open Tab 3</a>

Go To Tab 4

<a href="#" class="dcjct-slide" rel="3">Open Tab 4</a>
jQuery Social Media Tabs
jQuery Social Stream Plugin
jQuery Social Share Buttons Plugin