Setting count bubble in jQuery mobile Accordian Head

Sometimes we want to show count bubble in Accordion head that is different from the what jQuery mobile provides by default.

To add count bubble to Accordian head, we use following piece of code:

[html]</pre>
<h2>Heading<span class="ui-li-count">10</span></h2>
<pre>
[/html]

But it doesn’t give us the desired output and it looks like following:

If we want to set count bubble in Accordian head as per our use case , we have to add following css:

[html]

.ui-collapsible-heading .ui-btn-text{ display:block;}
.ui-collapsible-heading .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px; border-radius: 1em 1em 1em 1em; background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; border: 1px solid #CCCCCC; color: #222222;font-weight: bold;text-shadow: 0 1px 0 #FFFFFF; }
[/html]

After making the changes, our Accordian head looks like following:

Hope it helps.:)
Rajan Shergill
rajan@intelligrape.com