Creating tabs shortcode

user2587741 posted an answer to their question inside the question:

$tabs_divs = '';

function tabs_group($atts, $content = null ) {
    global $tabs_divs;

    $tabs_divs = '';

    $output = '<div id="tab-side-container"><ul';
    $output.='>'.do_shortcode($content).'</ul>';
    $output.= '<div class="panel-container">'.$tabs_divs.'</div>';

    return $output;  
}  


function tab($atts, $content = null) {  
    global $tabs_divs;

    extract(shortcode_atts(array(  
        'id' => '',
        'title' => '', 
    ), $atts));  

    if(empty($id))
        $id = 'side-tab'.rand(100,999);

    $output = '
        <li>
            <a href="#'.$id.'">'.$title.'</a>
        </li>
    ';

    $tabs_divs.= '<div id="'.$id.'">'.$content.'</div>';

    return $output;
}

add_shortcode('tabs', 'tabs_group');
add_shortcode('tab', 'tab');

Creating tabs short code. Use bootstrap tab panel so must use bootstrap class in HTML and don't missing link bootstrap js and css.
Code put in your current theme function.php file and use this [tab_review] More Info : http://getbootstrap.com/javascript/#tabs

function tab_custom() {
    $tab_data='';
    $tab_data.='<div id="tab-side-container">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <h2>Home</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <h2>Profile</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <h2>Messages</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
            <div role="tabpanel" class="tab-pane" id="settings">
                <h2>Settings</h2>
                <p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
            </div>
        </div>
    </div>';
    return $tab_data;
}
add_shortcode( 'tab_review', 'tab_custom' );