# 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.

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 4

    <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>

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.

Social Media Tabs plugin was created by Design Chemical.