Question

Below are the codes for 2 accordions (jquery ui). The first is hardcoded with html, and the second one is delivered to the page, on Document ready, via jquery.

HTML: [This accordion works]:

<div class="accordion">
    <h3><a href="">one</a></h3>
    <div>aaaaaaaaaaaaaaaaaaaaaaaa</div>

    <h3><a href="">two</a></h3>
    <div>bbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

PHP: [This accordion does not work]

echo'
<div class="accordion">

    <h3><a href="">One</a></h3>
    <div>111111aaaaa</div>

    <h3><a href="">Two</a></h3>
    <div>222222aaaaa</div>

    <h3><a href="">Three</a></h3>
    <div>333333</div>  
</div>
';

How do I make the dynamically delivered accordion also work?

EDITED:

$(document).ready(function(){

    $('#drag').draggable();
    $('.accordion').accordion();

    $.post('scripts/test.php', {  },
        function(output){
            $("div#test_php").html( output );
        }
    );

});

On Document Ready == set up the accordion functionality, and then request the second accordion from php script, embedding it into the DOM.
All the php script does is echo the code for a second accordion.

Answer 1

You need to reinitialize the accordian again if you’re injecting it dynamically into the DOM.

$.post('scripts/test.php', {  },
        function(output){
            $("div#test_php").html( output );
            $('.accordion').accordion();
        }
);