Jquery UI Accordion does not work when created dynamically with web database

JavaScript
1

This accordion works fine when it’s on the page by itself, but when I dynamically populate the individual title/content pairs via a web database, the title and content are both visible for all entries instead of just the title, so the accordion function ceases to work. Is there a problem with the way I implemented it, or do they simply quit working when innerHTML is involved?

The rest of the database (inserting dictionary term and definition in 2 different fields) is functioning flawlessly without the accordion function. I want to integrate the accordion so there’s less scrolling for the user.

Here is the code implemented and the code (commented out) straight from the source for comparison:

    function showRecords() {
    results.innerHTML = '';
    results.innerHTML = '<div id="accordion">';
    db.transaction(function(tx) {
        tx.executeSql(selectAllStatement, [], function(tx, result) {
            dataset = result.rows;
            for (var i = 0, item = null; i < dataset.length; i++) {
                item = dataset.item(i);
                results.innerHTML +=
                '<h3>' + item['term'] + '</h3><div><p>' + item['definition'] + '<button
                class="glossaryButton2" onClick="loadRecord('+i+')">Edit</button>  ' +
                '<button  class="glossaryButtonDel" style="float:right;"
                onClick="deleteRecord('+item['id']+')">Delete</button></p><hr></div>';
            }
            });
        }); results.innerHTML += '<div id="accordion">';
    }

    /*

    <div id="accordion">

    <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>

    </div>
*/

Here is the Javascript:

    <script>
    $(function() {
        $( "#accordion" ).accordion({
            collapsible: true
        });
    });
    </script>

This is what I have linked:

&lt;script src="../javascripts/jquery.js"&gt;&lt;/script&gt;
&lt;script src="../javascripts/jquery.ui.core.js"&gt;&lt;/script&gt;
&lt;script src="../javascripts/jquery.ui.widget.js"&gt;&lt;/script&gt;
&lt;script src="../javascripts/jquery.ui.accordion.js"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" href="../stylesheets/foundation.css"&gt;  &lt;!-- Zurb Foundation --&gt;
&lt;link rel="stylesheet" href="../stylesheets/app.css"&gt;  &lt;!-- styles the top bar --&gt;
&lt;link rel="stylesheet" href="../stylesheets/demos.css"&gt;  &lt;!-- accordion --&gt;

&lt;script src="../cordova-2.3.0.js"&gt;&lt;/script&gt;  &lt;!-- PhoneGap code --&gt;
&lt;script src="../javascripts/topbar_a.js"&gt;&lt;/script&gt; &lt;!-- drop-down menu for narrow screens --&gt;
&lt;script src="../javascripts/wide_a.js"&gt;&lt;/script&gt; &lt;!-- menu for wider screens --&gt;

(FYI: This code is sharing space with Zurb Foundation 3, and uses the Jquery that came with it. It works fine with the above HTML version when used apart from the database.)

This above problem is not unique to Jquery UI (code taken from <http://jqueryui.com/accordion/#collapsible&gt;). I’ve had exactly the same problem with 4 other Javascript accordions - I keep trying! I always try the accordion by itself; if it works, then I integrate it with the database + innerHTML.

2

Too complicated? Not enough information given?