title: Creating a jQuery tabs shortcode
body: <p>I am trying to create a jQuery tabs shortcode for WordPress this is my code in my functions.php for some reason the tabs show etc but they don't change?</p>
  
  <pre><code>add_shortcode('tabs', 'tabs_group');
  add_shortcode('tab', 'tab');
  
  // this variable will hold your divs
  $tabs_divs = '';
  
  function tabs_group( $atts, $content = null ) {
      global $tabs_divs;
  
      // reset divs
      $tabs_divs = '';
  
      extract(shortcode_atts(array(  
          'id' =&gt; '',
          'class' =&gt; ''
      ), $atts));  
  
      $output = '&lt;ul class="nav nav-tabs '.$class.'"  ';
  
      if(!empty($id))
          $output .= 'id="'.$id.'"';
  
      $output.='&gt;'.do_shortcode($content).'&lt;/ul&gt;';
      $output.= '&lt;div class="tab-content"&gt;'.$tabs_divs.'&lt;/div&gt;';
  
      return $output;  
  }  
  
  
  function tab($atts, $content = null) {  
      global $tabs_divs;
  
      extract(shortcode_atts(array(  
          'id' =&gt; '',
          'title' =&gt; '',
          'active'=&gt;'n' 
      ), $atts));  
  
      if(empty($id))
          $id = 'tab_item_'.rand(100,999);
  
      $activeClass = $active == 'y' ? 'active' :'';
      $output = '
          &lt;li class="'.$activeClass.'"&gt;
              &lt;a href="#'.$id.'"&gt;'.$title.'&lt;/a&gt;
          &lt;/li&gt;
      ';
  
      $tabs_divs.= '&lt;div class="tab-pane '.$activeClass.'" id="'.$id.'"&gt;'.$content.'&lt;/div&gt;';
  
      return $output;
  }
  </code></pre>
  
  <p>Here is whats in my header:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And on my page I have:</p>
  
  <pre><code>[tabs]
  [tab title="tab" active="y" id="home"]home[/tab]
  [tab title="tab2" active="n" id="about"]about[/tab]
  [tab title="tab3" active="n" id="help"]help[/tab]
  [/tabs]
  </code></pre>
  
  <p>EDIT!! </p>
  
  <pre><code>function tabs_header() {
  
  //wp_enqueue_script('jquery');
  
  wp_register_script( 'add-jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('jquery'),'',true  );
  wp_register_script( 'add-jqueryui-js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('jquery'),'',true  );
  
  
  wp_enqueue_style( 'add-jquery-js' );
  wp_enqueue_style( 'add-jqueryui-js' );
  
  }
  add_action( 'wp_enqueue_scripts', 'tabs_header' );
  </code></pre>