jquery accordion header

Question

Hello I am using the jquery accordion plugin on 2 divs

so I setup my divs like this

<div id="contacts" class="mainStyle">
<h3 id="headeronline"><a href="#">Online</a></h3>
        <div id="onlinecontacts"> 
        </div>
<h3 id="headeroffline"><a href="#">Offline</a></h3>
        <div id="offlinecontacts"> 
        </div>
</div>

then in my document.ready function I create the accordion

$("#contacts").accordion({
            collapsible: true, fillSpace: true
        });

I want to update the headers of teh accordion later on, so I use

$(headeronline).text("Online (" + onlinecount + ")");

$(headeroffline).text("Offline (" + offlinecount + ")");

the text of the header does update, however the new text ends up overlapping the collapse expand icon of the accordion.

Am I doing something wrong ? if so what is the correct way to update the header of the accordion ?

Thanks

Answer 1

Your update code needs to be changed as follows:

$('#headeronline a').text("Online (" + onlinecount + ")");

$('#headeroffline a').text("Offline (" + offlinecount + ")");

The headeronline and headeroffline weren't being referred to as IDs and the text needed to be changed in the link, not instead the header.