How to apply this plugin in wordpress

We can use this plugin by creating our own shortcodes.
1. First download the plugin and activate it.
2. After activating, open functions.php file of your theme folder and create your own shortcodes at the end of the file.I used these shortcodes:

function tab_function( $atts , $content = null ) {

	// Code
	return '<div id="demoTab">';
}
add_shortcode( 'tab', 'tab_function' );

function tabtitle_func($atts,$content = null)
{
	return '<ul class="resp-tabs-list">';
}
add_shortcode('tabtitle','tabtitle_func');

function title_func($atts,$content = null)
{
	return '<li>' . $content . '</li>';
}
add_shortcode('title','title_func');

function end_tabtitle_func($atts,$content = null)
{
	return '</ul><div class="resp-tabs-container">';
}
add_shortcode('end_tabtitle','end_tabtitle_func');

function cont_func() {
	return '<div>';
}
add_shortcode('content', 'cont_func');

function contend_func() {
	return '</div>';
}
add_shortcode('end-content', 'contend_func');

/*function content_func($atts,$content = null)
{
	return '<div>'.$content .'</div>';
}
add_shortcode('content','content_func');
*/
function tabend_func($atts,$content = null)
{
	return '</div></div>';
}
add_shortcode('tabend','tabend_func');

3. Then, apply these created shortcode to your admin pages of your site(admin panel->pages->click edit under your corresponding page->use the shortcode in the content area).Sample page created by me:

[tab]

[tabtitle]
[title]Information[/title]
[title]Staff[/title]
[end_tabtitle]

[content]
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
[end-content]

[content]
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.</p>
[end-content]

[tabend]

4. Thats it.your are done with two tabs in your output which is also responsive.Check this site for my output: mysite

Thanks for the info about implementing the short code! One questions… How did you get your css styling? The plugin’s css file is inactive and I am unable to do anything with it…

An alternative – just copy and paste this into your post or page (in html editor obviously):

<div id="demoTab">
            <ul class="resp-tabs-list">
                <li>First tab name</li>
                <li>Second tab name</li>
                <li>third tab name</li>
            </ul> 

            <div class="resp-tabs-container">
                <div>first tab contents</div>
                <div>second tab contents</div>
                <div>third tab contents</div>
            </div>
        </div>

You can add extra tabs simply by adding new list items and divs.

The ‘demoTab’ id is important – I tried renaming it and it stopped working.