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
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
- <title>Title Goes Here</title>
- <script>
- $(document).ready(function() {
- var icons = {
- header: "ui-icon-circle-arrow-e",
- activeHeader: "ui-icon-circle-arrow-s"
- };
- $( "#accordion" ).accordion({ clearStyle: true, icons: icons } );
- });
- </script>
- </head>
- <body>
- <div id="accordion">
- <h3>Adams Company</h3>
- <script>
- $(function() {
- $( "#dialog" ).dialog({autoOpen: false});
- $( "#opener" ).click(function() {
- $( "#dialog" ).dialog( "open" );
- });
- });
- </script>
- <div>
- <p>The data from the db is loading very nicely no problems there</p>
- <div id="dialog" title="All Keywords">
- <p>This is an animated dialog which is useful for displaying information.
- </div>
- <button id="opener">View All Keywords</button>
- </div>
- <h3>Roberts Company</h3>
- <script>
- $(function() {
- $( "#dialog1" ).dialog({autoOpen: false});
- $( "#opener1" ).click(function() {
- $( "#dialog" ).dialog( "open" );
- });
- });
- </script>
- <div>
- <p>As is the data from the db iin this instance no problems there</p>
- <div id="dialog1" title="All Keywords">
- <p>Have not had a problem bringing in data from db here either</p>
- </div>
- <button id="opener1">View All Keywords</button>
- </div>
- </div>
- </body>
- </html>
4