I Am trying to create a wordpress shortcode that allows users to creat jQuery UI tabs. I found this great script online which claims to do it - however it has some quite unwelcome results in my page.
Firstly, the script I am currently using is as follows:
add_shortcode( 'tabgroup', 'jqtools_tab_group' );
function jqtools_tab_group( $atts, $content )
{
$GLOBALS['tab_count'] = 0;
do_shortcode( $content );
if( is_array( $GLOBALS['tabs'] ) ){
foreach( $GLOBALS['tabs'] as $tab ){
$tabs[] = '<li><a class="" href="#">'.$tab['title'].'</a></li>';
$panes[] = '<div class="pane"><h3>'.$tab['title'].'</h3>'.$tab['content'].'</div>';
}
$return = "
".'<!-- the tabs --><ul class="tabs">'.implode( "
", $tabs ).'</ul>'."
".'<!-- tab "panes" --><div class="panes">'.implode( "
", $panes ).'</div>'."
";
}
return $return;
}
add_shortcode( 'tab', 'jqtools_tab' );
function jqtools_tab( $atts, $content )
{
extract(shortcode_atts(array(
'title' => 'Tab %d'
), $atts));
$x = $GLOBALS['tab_count'];
$GLOBALS['tabs'][$x] = array( 'title' => sprintf( $title, $GLOBALS['tab_count'] ), 'content' => $content );
$GLOBALS['tab_count']++;
}
However, the HTML output I am TRYING to achieve is this:
<div class="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Content</p>
</div>
<div id="tabs-2">
<p>Content</p>
</div>
<div id="tabs-3">
<p>Content</p>
</div>
</div>
The shortcode php gives a slightly different output to what I need in order to make this work - here is my current outputted HTML:
<!-- the tabs -->
<ul class="tabs">
<li><a class="" href="#">Tab 0</a></li>
<li><a class="" href="#">Tab 1</a></li>
<li><a class="" href="#">Tab 2</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div class="pane">
<h3>Tab 0</h3>Content
</div>
<div class="pane">
<h3>Tab 1</h3>Content
</div>
<div class="pane">
<h3>Tab 2</h3>Content
</div>
</div>
Finally, the shortcode I am using looks like this:
[tabgroup]
[tab title="tab1"]Content[/tab]
[tab title="tab2"]Content[/tab]
[tab title="tab3"]Content[/tab]
[/tabgroup]
My question is, how do I need to change my php code to make the outputted HTML look like the HTML needed to make the tabs work?