Title: Create wordpress shortcode for jQuery UI Tabs
Tags: php;jquery;wordpress;jquery-ui;shortcode
Question: 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&gt;<a class="" href="#"&gt;'.$tab['title'].'</a&gt;</li&gt;';
            $panes[] = '<div class="pane"&gt;<h3&gt;'.$tab['title'].'</h3&gt;'.$tab['content'].'</div&gt;';
        }
        $return = "\n".'<!-- the tabs --&gt;<ul class="tabs"&gt;'.implode( "\n", $tabs ).'</ul&gt;'."\n".'<!-- tab "panes" --&gt;<div class="panes"&gt;'.implode( "\n", $panes ).'</div&gt;'."\n";
    }
    return $return;
}

add_shortcode( 'tab', 'jqtools_tab' );
function jqtools_tab( $atts, $content )
{
    extract(shortcode_atts(array(
            'title' =&gt; 'Tab %d'
    ), $atts));

    $x = $GLOBALS['tab_count'];
    $GLOBALS['tabs'][$x] = array( 'title' =&gt; sprintf( $title, $GLOBALS['tab_count'] ), 'content' =&gt;  $content );

    $GLOBALS['tab_count']++;
}
```

However, the HTML output I am TRYING to achieve is this:

```<div class="tabs"&gt;
    <ul&gt;
        <li&gt;<a href="#tabs-1"&gt;Tab 1</a&gt;</li&gt;
        <li&gt;<a href="#tabs-2"&gt;Tab 2</a&gt;</li&gt;
        <li&gt;<a href="#tabs-3"&gt;Tab 3</a&gt;</li&gt;
    </ul&gt;
    <div id="tabs-1"&gt;
        <p&gt;Content</p&gt;
    </div&gt;
    <div id="tabs-2"&gt;
        <p&gt;Content</p&gt;
    </div&gt;
    <div id="tabs-3"&gt;
        <p&gt;Content</p&gt;
    </div&gt;
</div&gt;
```

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 --&gt;
<ul class="tabs"&gt;
<li&gt;<a class="" href="#"&gt;Tab 0</a&gt;</li&gt;
<li&gt;<a class="" href="#"&gt;Tab 1</a&gt;</li&gt;
<li&gt;<a class="" href="#"&gt;Tab 2</a&gt;</li&gt;
</ul&gt;
<!-- tab "panes" --&gt;
<div class="panes"&gt;
    <div class="pane"&gt;
        <h3&gt;Tab 0</h3&gt;Content
    </div&gt;
    <div class="pane"&gt;
        <h3&gt;Tab 1</h3&gt;Content
    </div&gt;
    <div class="pane"&gt;
        <h3&gt;Tab 2</h3&gt;Content
    </div&gt;
</div&gt;
```

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?

Comment: Please ask the question on wordpress.stackexchange.com ,you will get best and quick answer

Here is the accepted answer: OK this is what you have to do.

```if( is_array( $GLOBALS['tabs'] ) ){
    foreach( $GLOBALS['tabs'] as $k=&gt;$tab ){
        $tabs[] = '<li&gt;<a href="#tab-'.$k.'"&gt;'.$tab['title'].'</a&gt;</li&gt;';
        $panes[] = '<div id="tab-'.$k.'"&gt;<p&gt;'.$tab['content'].'</p&gt;</div&gt;';
    }
    $return = "\n".'<!-- the tabs --&gt;<div class="tabs"&gt;<ul&gt;'.implode( "\n", $tabs ).'</ul&gt;'."\n".'<!-- tab "panes" --&gt;'.implode( "\n", $panes ).'</div&gt;'."\n";
}
```



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:04/26/14', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<php><jquery><wordpress><jquery-ui><shortcode>', 'Title': 'Create wordpress shortcode for jQuery UI Tabs', 'ViewCount': 1441, 'id': 23307032, 'user_AboutMe': '<p>Musician and Freelance Webdeisgner</p>\n', 'user_AccountId': 1419254.0, 'user_DisplayName': 'Sam Skirrow', 'user_Reputation': 3553.0, 'user_Views': 364.0, 'user_id': 1344228.0}}