accordion stop working in jQuery Tab with ajax content

accordion stop working in jQuery Tab with ajax content

hi, I'm working in jQuery tab that load the content from ajax.
where every content has accordion panel..
before I use the jquery tab, the accordion works well,
but after I implement the ajax tab, the accordion only work on the first tab (on home.php).
when I click the other tabs, the accordion seems to not working any more (looks like there is no accordion panel)..
 
I'm new in jQuery, so I dont have any idea to solve this issue..
 
here is the master's html

  1. <head>

    $(document).ready(function() {

    $("#tabs").tabs();

    });

  3. <body>

    <div class="board">

    <div id="tabs">

    <?php

    echo "welcome ".$_SESSION["loginuser"];

    ?>

    <ul>

    <li><a href="home.php">Home</a></li>

    <li><a href="project.php">Project</a></li>

    <li><a href="calendar.php">Calendar</a></li>

    <li><a href="hours.php">Hours</a></li>

    <li><a href="admin.php">Admin</a></li>

    </ul>

    </div>

    </div>

    </body>

     

    the script to call the accordion ui on each page :

     

  1. $(function() {

    $("#accordion").accordion({

    collapsible: true,

    autoHeight: false,

    active: false

    });

    }); 


the accordion only works on the first tab (home.php)

it doesn't work anymore on the other tabs if I click the other tabs..

the accordion content is not toggle anymore....

if you know how to solve this problem, please help me.............

thanks before hand