how to dynamic tab by shortcode in wordpress?

Question

My markup is here -

 <section class="recentnews">
      <h4 class="sidebarheader">Recent News</h4>
      <ul class="tabs">
        <li><a class="active" href="#trends">Trends</a></li>
        <li><a class="" href="#fashion">Fashion</a></li>
        <li><a class="" href="#shows">Shows</a></li>
      </ul>
      <ul class="tabs-content">
        <li class="active" id="trends">
          <p>Lorem ipsum dolor sit amet, proscriptum videt ulteriori. Filiam sunt amore nec est cum autem est se in. Cellam sanctissima coniunx in lucem exempli paupers coniunx rex cum autem quod ait regem Ardalio. Filiam sunt amore nec est cum autem est se in.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
        </li>
        <li id="fashion">
          <p>Lorem ipsum dolor sit amet, proscriptum videt ulteriori. Filiam sunt amore nec est cum autem est se in. Cellam sanctissima coniunx in lucem exempli paupers coniunx rex cum autem quod ait regem Ardalio. Filiam sunt amore nec est cum autem est se in.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
        </li>
        <li id="shows">
          <p>Lorem ipsum dolor sit amet, proscriptum videt ulteriori. Filiam sunt amore nec est cum autem est se in. Cellam sanctissima coniunx in lucem exempli paupers coniunx rex cum autem quod ait regem Ardalio. Filiam sunt amore nec est cum autem est se in.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
        </li>
      </ul>
    </section>

and for active tab js here -

/**
 * Skeleton V1.1
 * Copyright 2011, Dave Gamache
 * www.getskeleton.com
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 8/17/2011
 */

(function ($) {
  // hash change handler
  function hashchange () {
    var hash = window.location.hash
      , el = $('ul.tabs [href*="' + hash + '"]')
      , content = $(hash)

    if (el.length && !el.hasClass('active') && content.length) {
      el.closest('.tabs').find('.active').removeClass('active');
      el.addClass('active');
      content.show().addClass('active').siblings().hide().removeClass('active');
    }
  }

  // listen on event and fire right away
  $(window).on('hashchange.skeleton', hashchange);
  hashchange();
  $(hashchange);
})(jQuery);

So how to dynamic tab by shortcode in wordpress with post query?

I want to use something like this code -

    function tab_shortcode($atts){
            extract( shortcode_atts( array(
                    'category' => '',
            ), $atts, 'tabid' ) );

        $q = new WP_Query(
            array('posts_per_page' => '10', 'post_type' => 'tab', 'tab_category' => $category, 'orderby' => 'meta_value','order' => 'ASC')
            );            

            $list = '
           <script type="text/javascript">
           jQuery(function() {
           jQuery(".tabnav ul li:first-child")
                   .addClass("active")
           });
           </script>
           //Start HTML code and query  
           <div style="width:100% !important;overflow: hidden;">
           <div class="col-12">
                   <div class="tabs vertical row">
                           <nav class="tabnav nav col-27">
                                   <ul>
           ';

            while($q->have_posts()) : $q->the_post();
                    $idd = get_the_ID();
                    $list .= '
                           <li><a href="#">'.get_the_title().'</a></li>
                   ';        
            endwhile;
            $list.= '
                                   </ul>
                           </nav>
           ';


            while($q->have_posts()) : $q->the_post();
                    $idd = get_the_ID();
                    $list .= '
                           <div class="tab col-9">
                                   '.get_the_content().'
                           </div>
                   ';        
            endwhile;
            $list.= '
                   </div>
           </div>
           </div>
           ';
            wp_reset_query();
            return $list;
    }
    add_shortcode('tab', 'tab_shortcode');

I want to show all recent 3 post from any category in three tabs.

Html template http://www.anariel.com/freebix/.

Can anyone help me?