The DOM, Jquery and Accordions

Hello,

I have a page the makes an AJAX request, and returns some data from the database, once it is retruned I am trying to append it to a div and make an accordion, however all I am getting is the data back and no accordion here is my source code once the AJAX has run.(snippet)

    <script type="text/javascript">

$(document).ready(function() {
     //accordians for when the AJAX loads the content
     // hides the main_menu as soon as the DOM is ready
     // (a little sooner than page load)
     $('#main_menu').hide();
     // shows the slickbox on clicking the noted link
     $('h3#show-menu a').click(function() {
           $('#main_menu').toggle('slow');
           return false;
     });
    //try and hide the left content when it is null
    $("#left-content:empty").hide();
    //style up the scroll bar
    $('#left-content').jScrollPane();
    //do some AJAX to call the method instead of the browser
    $("a.navlink").click(function (ev) {
        $(this).toggleClass("active");
        ev.preventDefault();
        var id = $(this).attr("id")
        if ($(this).hasClass("active")) {
            $("."+id).remove();
        } else {
             //$(this).toggleClass("active");
             var url = $(this).attr("href");
             $.ajax ({
                 url: url,
                 type: "POST",
                 success : function (html) {
                     $("#accordion").append(html);
                     $('#accordion').accordion({
                         active: 0,
                         header:'h2.Blog'
                     });
                 //alert(accordion())
                 }
             });
            }
         });
       });
</script>
</head>
<body>
<div style="left: -100em; position: absolute; width: 100em;"/>
<div id="wrapper">
<h3 id="show-menu">
</h3>
<div id="main_menu" style="display: block;">
</div>
<div id="left-content-holder">
</div>
<div id="right-content">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h2 class="Blog ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
</h2>
<div class="Blog ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 16px;" role="tabpanel">Hello World</div>
</div>
</div>
</div>

As you can see the data gets appended to the <div id="accordion"> and all the apropriate classes get given to the elements that should give it accordion functionality but I get nothing. Should i be creating the accordion from the DOM and theoretically the data is returned is not in the HTML and if so how would I go about doing this?

Thanks

ansaurus

tags:

views:

answers:

The DOM, Jquery and Accordions

related questions