CODEWITHSUNDEEP
jquery-mobile
Asif
Asif

Reputation: 78

Need help to make non-collapsible section using jQuery mobile

<div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>

    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>        

    <div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
        <h3>Read only Section 3</h3>
    </div>        

</div>

using the above pattern I want to make some divs within the collabsile-set with heading only and I want to make them non-collapsible because of some requirements. If anybody know anything regarding this, please let me know

Upvotes: 0

Views: 3515

Answers (3)

oriolparra
oriolparra

Reputation: 222

You can do this:

$(".ui-collapsible").on("collapsiblecreate", function( event, ui ) {
    $(this).unbind();
});

Upvotes: 0

Nux
Nux

Reputation: 10002

Or you can use this code until section-box role is available:

<div class="ui-collapsible ui-body-c">
    <h3 class="ui-collapsible-heading">
        <span style="margin:0; cursor:auto;" class="ui-btn ui-corner-top ui-btn-up-a">
            <span class="ui-corner-top ui-corner-bottom" style="display:block; padding: .6em 5px">Title
            </span>
        </span>
    </h3>
    <div class="ui-collapsible-content ui-body-c ui-corner-bottom">
        <div>Content
        </div>
    </div>
</div>

Upvotes: 0

user700284
user700284

Reputation: 13620

The collapse/expand of content is being handled in the click handler of the collapsible heading.So by unbinding the click event you can keep accordion always expanded.

$(".ui-collapsible-heading").unbind("click");

A demo here - http://jsfiddle.net/8dLw4/

Edit

Edited fiddle for keeping some in expanded state always- http://jsfiddle.net/8dLw4/2/

An attribute data-allow-collapse is added.For sections you want to allow collapse,set it as true.For other sections false.

Here is the complete source code:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile Sample</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script>
            $("#page").live('pageinit', function(event) {
                $(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse");
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="page">
            <div data-role="header">
                <h1>Page Title</h1>
            </div><!-- /header -->
            <div data-role="content">
                <div data-role="collapsible-set">
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
                        <h3>Section 1-Not allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
                        <h3>Section 2-Allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="true">
                        <h3>Section 3-Allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                    <div data-role="collapsible" data-collapsed="false" data-allow-collapse="false">
                        <h3>Section 4-Not allowed</h3>
                        <p>
                            I'm the collapsible set content for section B.
                        </p>
                    </div>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

Upvotes: 3

Related Questions