Open Dialog From Within Accordion

Open Dialog From Within Accordion

I want to open a dialog from within an accordion
The data for the accordion comes from mySQL database
But whenever I try it the dialog (which also will pull in external data) seems
to mess up the accordion layout.
I use a for loop in php to cycle thru the company IDs and set up accordion section
for each (bkos of sensitive information I cannot post here but the loop and data import
parts are working good) this is totally a layout problem that I have spent hours trying to figure out 
and just can't....
Any and all help will be greatly appreciated....

My code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  6. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  7. <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  8. <title>Title Goes Here</title>
  9. <script>
  10. $(document).ready(function() { 
  11. var icons = {
  12. header: "ui-icon-circle-arrow-e",
  13. activeHeader: "ui-icon-circle-arrow-s"
  14. };
  15. $( "#accordion" ).accordion({ clearStyle: true, icons: icons } );
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <div id="accordion">
  21. <h3>Adams Company</h3>
  22. <script>
  23. $(function() {
  24. $( "#dialog" ).dialog({autoOpen: false});
  25. $( "#opener" ).click(function() {
  26. $( "#dialog" ).dialog( "open" );
  27. });
  28. });
  29. </script>
  30. <div>
  31. <p>The data from the db is loading very nicely no problems there</p>
  32. <div id="dialog" title="All Keywords">
  33. <p>This is an animated dialog which is useful for displaying information.
  34. </div>
  35. <button id="opener">View All Keywords</button>
  36. </div>
  37. <h3>Roberts Company</h3>
  38. <script>
  39. $(function() {
  40. $( "#dialog1" ).dialog({autoOpen: false});

  41. $( "#opener1" ).click(function() {
  42. $( "#dialog" ).dialog( "open" );
  43. });
  44. });
  45. </script>
  46. <div>
  47. <p>As is the data from the db iin this instance no problems there</p>
  48. <div id="dialog1" title="All Keywords">
  49. <p>Have not had a problem bringing in data from db here either</p>
  50. </div>
  51. <button id="opener1">View All Keywords</button>
  52. </div>
  53. </div>
  54. </body>
  55. </html>

4