title: JQuery UI Accordion dynamic creation
body: <p>I am creating dynamic accordions, for which i used a function as below</p>
  
  <pre><code>function buildAccordion(id,keys,values)
  {
      var accord="&lt;div id="+id+"&gt;";
      $.each(keys, function(i, value) 
      { 
          accord+="&lt;h3&gt;&lt;a href='#'&gt;"+value+"&lt;/a&gt;&lt;/h3&gt;&lt;div id="+values[i]+"&gt;&lt;/div&gt;";
      });
      accord+="&lt;/div&gt;";
  
      return accord;
  }
  </code></pre>
  
  <p><code>keys</code> is an array with accordion's header &amp; <code>values</code> an array containing div id's (for adding content to each panel @ a later point of time)</p>
  
  <p>Below is the function calling <code>buildAccordion</code> function</p>
  
  <pre><code>function alertsAccordion(id)
  {
      var keys=   ["KB Alerts","Product Alerts","Emergency Bug Fix Alerts","Error Alerts"];
      var values= ["kbAlertsDiv","productAlertsDiv","ebfAlertsDiv","errorAlertsDiv"];
  
      var idd=id+"Panel";
  
      $('#divContent').empty();
      $('&lt;div width="100%"&gt;')
      .attr('id','alertsSpan')
      .html('&lt;div class="titleBlue"&gt;Alerts&lt;/div&gt;'+buildAccordion(idd,keys,values)+'&lt;/div&gt;')       
      .appendTo('#divContent').delay(1).queue(function(){
          $("#"+idd).accordion();     //So here I am triggering accordion
      });
  
      $("#kbAlertsDiv").html("Olha!");
      $("#productAlertsDiv").html("Guttentag!");
      $("#ebfAlertsDiv").html("Blah! blah!");
      $("#errorAlertsDiv").html("halo");
  }
  </code></pre>
  
  <p>But the problem is the arrow icon &amp; the header text for each panel is overlapped, What is the problem, am I doing something wrong?</p>
  
  <p>Below is the screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/CGBwT.png" alt="enter image description here"></p>