jQuery UI Tab not showing correctly

Question

I am creating jQuery UI Tabs but all the tabs show static with all the contents, the tab is not working correctly, not selectable. (I don't have enough reputation to post image ><) The data is from XML file.

Here is the code: (I have all the link and script in the head) in HTML:

<div id="tabs">
    <ul id="tabtitle">
    </ul>
</div>

My js file:

$(document).ready(function(){
    var i = 1;
    $.get('data.xml', function(d){
        $(d).find('page').each(function(){

            var $page   = $(this),
            title       = $page.find('title').text(),
            description = $page.find('description').text(),

            var tabtitle = '<li><a href="#tab-' + i + '">' + title + '</a>' + '</li>';
            $('ul#tabtitle').append($(tabtitle));

            var tabcontent = '<div id="tabs-' + i + '">';
            tabcontent += '<p> ' + description + '</p>' ;
            tabcontent += '</div>';
            $('#tabs').append($(tabcontent));

            i++;
        });
    });
    $( "#tabs" ).tabs();
});

My XML file:

<?xml version="1.0" encoding="UTF-8"?>
<Pages>
    <page>
        <title>Tab1</title>
        <description>content for Tab1 here</description>
    </page>
    <page>
        <title>Tab2</title>
        <description>content for Tab2 here</description>
    </page>
    <page>
        <title>Tab3</title>
        <description>content for Tab3 here</description>
    </page>
    <page>
        <title>Tab4</title>
        <description>content for Tab4 here</description>
    </page>
</Pages>

Answer 1

You are creating the li reference to tab-n, but the related div are called tabs-n.

So there is not matching and you'll face the issue; you can check the problem by comment the tabs method and checking the DOM.

Try changing this:

var tabtitle = '<li><a href="#tab-' + i + '">' + title + '</a>' + '</li>';
$('ul#tabtitle').append($(tabtitle));

var tabcontent = '<div id="tabs-' + i + '">';

into:

var tabtitle = '<li><a href="#tab-' + i + '">' + title + '</a>' + '</li>';
$('ul#tabtitle').append($(tabtitle));

var tabcontent = '<div id="tab-' + i + '">'; 

Demo: http://jsfiddle.net/WcgyA/

EDIT

Because you are loading your xml by a jQuery get, you have to execute your tabs method at the end of the get callback function.