Setting count bubble in jQuery mobile Accordian Head

18 / Oct / 2012 by Rajan Shergill 5 comments

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:

<h2>Heading<span class="ui-li-count">10</span></h2>

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:


.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; }

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

Hope it helps.:)
Rajan Shergill


comments (5)

Leave a Reply

Your email address will not be published. Required fields are marked *