Addressing jquery ui accordion child div

Question

I have a page that has a dynamically created accordion with data on customers. In the h3 headers of the accordion I have spans I can get data from for my ajax request. The problem is that all the accordions have a div in them that belong to the "pcom" class. How can I address a particular "pcom" classed div? I can get the data from the header by using the .find(), since the spans are children of the header. This won't work for addressing my divs as they are not children of the h3 header. Any ideas?

my js for the request:

    $("#accordion").accordion({
                collapsible: true,
                active: false,
                header: "h3",
                heightStyle: "content",
                activate: function() {

                var claddress = $('.ui-accordion-header-active').find("span.claddress").text();
                var clcity = $('.ui-accordion-header-active').find("span.clcity").text();
                var clprov = $('.ui-accordion-header-active').find("span.clprov").text();

                //if there is no claddress don't bother - (for accordion activate on close)
                if (claddress == '') {
                    //nothing there so do nothing
                    return;
                }
                //if we do have something check the pcom db for a match
                $.ajax({
                    url: "commenter.php",
                    datatype: "json",
                    data: {
                        clAddress: claddress,
                        clCity: clcity,
                        clProv: clprov
                    },
                    success: function(data) {
                        //we have a match now show it
                        //THIS IS WHERE I NEED TO ADDRESS THE pcom DIV IN THE ACCORDION
                    }
                });

            }
            });

Edit: This is how the accordion is built (just the success portion of the ajax is shown)

                    success: function(data) {

                if(data == 'null') {
                buildaccordion("<h3>No Results Found</h3><div>No Data to Show.</div>");
                return;
                }

                var hbuild='';
                var tmp = $.parseJSON(data);
                //run a loop to build the HTML for each record
                $.each(tmp, function(i) {
                    //Header
                    hbuild += '<h3 class="sTitle">' + tmp[i].Name + ' - <span class="claddress">' + tmp[i].Address + '</span>, <span class="clcity">' 
                    + tmp[i].City + '</span>, <span class="clprov">' + tmp[i].Prov + '</span> - ' + tmp[i].CallInTime + '</h3>';

                    //Inner
                    hbuild += "<div>";
                    hbuild += '<ul class="menu">';
                    hbuild += '<li><a href="newcall.php?CustID=' + tmp[i].CustID + '">New Call</a></li>';
                    hbuild += '<li><a href="editcall.php?CustID=' + tmp[i].CustID + '">Edit Call</a></li>';
                    hbuild += '<li><a href="viewcall.php?CustID=' + tmp[i].CustID + '">Details</a></li>';
                    hbuild += '</ul>';
                    hbuild += '<div class="spcom">Persistent Comment Here</div>';
                    hbuild += '<div class="acname">Name: ' + tmp[i].Name + ' - <span class="ClientCust">Customer Num:' + tmp[i].ClientCustNum + '</span></div>';
                    hbuild += '<div class="acphone">Phone: ' + tmp[i].Phone + ' Ext#:' + tmp[i].PExt + '</div>';
                    hbuild += '<div class="acaddress">Address: ' + tmp[i].Address + ', ' + tmp[i].City + ', ' + tmp[i].Prov + ', ' + tmp[i].PCode + '</div>';
                    hbuild += '<div class="accontact">Contact: ' + tmp[i].Contact + '</div>';
                    hbuild += '<span class="acbilledto">Billed To: ' + tmp[i].BilledTo + '</span><br>';
                    hbuild += '<div class="acponum">PO Num: ' + tmp[i].PONum + '</div>';
                    hbuild += '<div class="acourpo">OurPO: ' + tmp[i].OurPO + '</div>';
                    hbuild += '<div class="acgivento">Service Provider: ' + tmp[i].GivenTo + '</div>';
                    hbuild += '<div class="acourwo">Accurate WO: ' + tmp[i].OurWO + '</div>';
                    hbuild += '<div class="acourinv">Accurate Invoice: ' + tmp[i].OurInv + '</div>';
                    hbuild += '<div class="acinvamt">Invoice Total: $' + tmp[i].InvAmt + '</div>';
                    hbuild += '<div class="accomments">Call Comments: ' + tmp[i].Comments + '</div>';
                    hbuild += "</div>";
                });
                //send it off to the build
                buildaccordion(hbuild);
                }

Now I could add an id containing a unique identifier in the pcom div at the time it is created (like a customer id) but doing that way would result in a id in the h3 header as well, thus it would get the id in the h3 header, and then reference the div. But I would like to do this without hiding a ton of data in the tags of the accordion. I had to do that on another page and it gets quite confusing and messy.

Thanks for any help, Norst

Answer 1

Assuming standard HTML structure like so:

<h3><span>Section 1</span></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>

And assuming that you're targeting H3 elements individually, you'd use:

$(this).next('div');

If you need to get that div from the span with the class you've matched, it would be:

$(this).parent('h3').next('div');