jquery заголовок аккордеона

Здравствуйте, я использую плагин аккордеона jquery на 2 div.

поэтому я настраиваю свои div так

<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>

затем в моей функции document.ready я создаю аккордеон

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

Я хочу обновить заголовки аккордеона позже, поэтому я использую

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

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

текст заголовка обновляется, однако новый текст оказывается перекрывающим значок сворачивания и расширения аккордеона.

Я делаю что-то неправильно ? если да, то как правильно обновить заголовок аккордеона?

Спасибо