title: Dynamic Accordion Menu using Jquery 1.4.2
body: <p>Hi i am building a jquery accordion menu using VS2008 and MVC2.</p>
  
  <p>My requirement is to refresh the contents of the accordion and repopulate it when a user selects an item from a dropdownlist</p>
  
  <p>For this i am using a jquery ajax call which returns data with  and  tags like below</p>
  
  <pre><code>&lt;h3&gt;
    &lt;a href="#"&gt;Masters&lt;/a&gt;
  &lt;/h3&gt;
  &lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="#" onclick="pageclick('..\TRAN\EmpMst.aspx',1)"&gt;Employee Master&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
  ......
  ...
  </code></pre>
  
  <p>The first time on page load the accordion looks fine. But whenever i change the contents dynamically it looks awfull with weird CSS</p>
  
  <p><img src="https://i.stack.imgur.com/r1yCk.jpg" alt="Accordion Before &amp; After Dynamic Update"></p>
  
  <p>here is my ajax call</p>
  
  <pre><code>        $('#moduleList').change(function() {
              var rootPath = '&lt;%=Url.Content("~/")%&gt;';
              $.ajax({
                  type: "POST",
                  url: rootPath + "Home/GetMenu/",
                  data: { moduleid: $(this).val() },
                  success: function(result) {
                      $('#accordion').html(result);
                      //$('#accordion').append(result);
                      $('#accordion').accordion('destroy');
                      $('#accordion').accordion({
                          fillSpace: true, collapsible: true
                      });
                  },
                  error: function(error) { alert(error); }
              });
  
          });
  </code></pre>
  
  <p>am i doing something wrong ?</p>