WordPress.org

Ready to get started?Download WordPress

Forums

WP Easy Responsive Tabs to Accordion
How to apply this plugin in wordpress (4 posts)

  1. nvijaya
    Member
    Posted 10 months ago #

    Really nice plugin and its what i want to implement in the site.
    But, the problem is i don't know how to use this in my wordpress site.
    Please help me out.

    http://wordpress.org/plugins/wp-easy-responsive-tabs-to-accordion/

  2. nvijaya
    Member
    Posted 10 months ago #

    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

  3. jimbrohustle
    Member
    Posted 9 months ago #

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

  4. andymiller
    Member
    Posted 6 months ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic