jQuery Social Media Tabs Plugin

jQuery Social Media Tabs Plugin – Example 5

The plugin has several built-in features, which allow you to interact with the social media 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 “dcsmt-toggle” or declare your own via the “classOpen” option in the plugin settings.

Click To Toggle Tabs

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

To control which social feed 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="dcsmt-toggle" rel="1">Toggle & Open Tab 2</a>

Toggle & Open Tab 4

<a href="#" class="dcsmt-toggle" rel="3">Toggle & Open Tab 4</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 “dcsmt-close” or declare your own via the “classClose” option in the plugin settings.

Click To Close Tabs

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

Open Slide-Out Tabs

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

Click To Open Tabs

<a href="#" class="dcsmt-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 3

<a href="#" class="dcsmt-open" rel="3">Open Tab 3</a>

Change Active Tab

To change the active tab use class “dcsmt-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 dcsmt-slide link is clicked.

Navigate between tabs via the links below:

Go To Tab 1

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

Go To Tab 2

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

Go To Tab 3

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

Go To Tab 4

<a href="#" class="dcsmt-slide" rel="3">Open Tab 4</a>

Go To Tab 5

<a href="#" class="dcsmt-slide" rel="4">Open Tab 5</a>

Go To Tab 6

<a href="#" class="dcsmt-slide" rel="5">Open Tab 6</a>

Go To Tab 7

<a href="#" class="dcsmt-slide" rel="6">Open Tab 7</a>

Go To Tab 8

<a href="#" class="dcsmt-slide" rel="7">Open Tab 8</a>

Go To Tab 9

<a href="#" class="dcsmt-slide" rel="8">Open Tab 9</a>

Go To Tab 10

<a href="#" class="dcsmt-slide" rel="9">Open Tab 10</a>

Go To Tab 11

<a href="#" class="dcsmt-slide" rel="10">Open Tab 11</a>

Other Premium Plugins

WordPress Social Stream Plugin WordPress Social Share Buttons Plugin Top Social Share Posts Plugin