Nested Shortcode problem

<?php

/*
    [wp_tab tab_id="demo"]
        [wp_tab_content tab_title="Title 1"] Content 1[/wp_tab_content]
        [wp_tab_content tab_title="Title 2"] Content 2[/wp_tab_content]
        [wp_tab_content tab_title="Title 3"] Content 3[/wp_tab_content]
        [wp_tab_content tab_title="Title 4"] Content 4[/wp_tab_content]
        [wp_tab_content tab_title="Title 5"] Content 5[/wp_tab_content]
    [/wp_tab]
*/

// Parent shortcode
function wp_tab_shortcode_func($atts,$content){
ob_start();

        $wp_tab_atts = shortcode_atts(array(
                'tab_id' => '',
        ),$atts);
?>
  <script>
    $('#<?php echo $wp_tab_atts['tab_id'] ?>').liquidSlider();
  </script>
        <div id="<?php echo $wp_tab_atts['tab_id'] ?>" class="liquid-slider">
            <?php echo do_shortcode($content);  ?>
    </div>
<?php
        $var_ = ob_get_clean();
        return $var_;
}
add_shortcode('wp_tab','wp_tab_shortcode_func');

// Child shortcode
function wp_tab_content_shortcode($atts,$content){
        $wp_tab_content_atts = shortcode_atts(array(
                'tab_title' => '',
        ),$atts);

        return '<div><h2 class="title">'.$wp_tab_content_atts['tab_title'].'</h2><p>'.$content.'</p></div>';
}
add_shortcode('wp_tab_content','wp_tab_content_shortcode');