Home/ Questions/Q 8455785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:22:25+00:00

I have a collapsible section that I want to add an image and a

  • 0

I have a collapsible section that I want to add an image and a count bubble too like the markup below..

<a href="pa.aspx">
  <img src="images/gf.png" alt="" class="ui-li-icon">
  IT Change Controls<span class="ui-li-count">4</span> 
</a>

I problem is if I add anything but an <h3> tag the section header wont render properly. This is not working for me..

 <div data-role="collapsible" data-inset="false" data-collapsed="false">
     <%--<h3>Section 1</h3>--%>
     <a href="pa.aspx">
         <img src="images/gf.png" alt="" class="ui-li-icon">
         IT Change Controls<span class="ui-li-count">4</span> 
     </a>

How can I get an image and a count bubble in the section header?

Image of collapsible section with count bubble image on right side

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Maybe the following implementation is close to what you want:

    <!doctype html>
<html lang="en">
   <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>   
        <style>
            div.col-set .ui-icon {
                visibility:hidden;
            }

            div.col-set .comment-count {
              float: right;
              font-size: 11px;
            }

            div.col-set .img-set {
              float: left;
            }

            div.col-set a {
                text-decoration: none;
                font-size: 11px;
            }

            div.col-set .col-text {
                margin-left: 20px;
                text-align: center;
                float: left;
                font-size: 11px;
            }
    </style>
    </head>
    <body>
        <div data-role="page">
            <div data-role="content">   
                <div class="col-set" data-role="collapsible" data-collapsed="true">
                    <h3>
                        <a href="test.html">
                            <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/sj.png" class="img-set" alt="SJ Flag" />
                            <div class="col-text">Test 1</div>
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all comment-count">1</span>
                        </a>
                    </h3>
                    <p>Collapsible content 1.</p>
                </div>
                <div class="col-set" data-role="collapsible" data-collapsed="true">
                    <h3>
                        <a href="test.html">
                            <img src="http://jquerymobile.com/demos/1.0a4.1/docs/lists/images/sj.png" class="img-set" alt="SJ Flag" />
                            <div class="col-text">Test 2</div>
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all comment-count">2</span>
                        </a>
                    </h3>
                    <p>Collapsible content 2.</p>
                </div>
            </div>
        </div>      
    </body>
</html>

    enter image description here

    • 0