Example 5 - Interacting Using External Links
Example 5 - Interacting Using External Links
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.
<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:
<a href="#" class="dcsmt-toggle" rel="1">Toggle & Open Tab 2</a>
<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.
<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.
<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:
<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:
<a href="#" class="dcsmt-slide" rel="0">Open Tab 1</a>
<a href="#" class="dcsmt-slide" rel="1">Open Tab 2</a>
<a href="#" class="dcsmt-slide" rel="2">Open Tab 3</a>
<a href="#" class="dcsmt-slide" rel="3">Open Tab 4</a>
<a href="#" class="dcsmt-slide" rel="4">Open Tab 5</a>
<a href="#" class="dcsmt-slide" rel="5">Open Tab 6</a>
<a href="#" class="dcsmt-slide" rel="6">Open Tab 7</a>
<a href="#" class="dcsmt-slide" rel="7">Open Tab 8</a>
<a href="#" class="dcsmt-slide" rel="8">Open Tab 9</a>
<a href="#" class="dcsmt-slide" rel="9">Open Tab 10</a>
<a href="#" class="dcsmt-slide" rel="10">Open Tab 11</a>
Note:
Twitter - to set up your Twitter API credentials see Social Networks Details -> Twitter API Credentials.
Google + - to set up your Google API key see Plugin Options -> Creating Your Own Google API key.