CODEWITHSUNDEEP
jqueryjquery-mobile
Russell Christensen
Russell Christensen

Reputation: 191

jQuery Mobile - Disable Clicking Collapsible Header

I would like to be able to disable opening/closing collapsible's in a set, instead the user is going to click a continue button inside of the open element which will do validation and then open the next element when its ready to. I'm basically using the collapsible set as a wizard. I have been searching the docs and have found where I can capture an event when the collapse takes place but I can't find how to cancel it. Any suggestions, or suggestions of other wizard type controls that would do what I'm talking about I would appreciate it!

Upvotes: 1

Views: 7808

Answers (2)

strikernl
strikernl

Reputation: 55

Changing

<div data-role="collapsible">

to

<div data-role="collapsible" class="ui-disabled">

disables the header both graphically and functionally for me.

See http://jsfiddle.net/NY63z/

Upvotes: 6

Russell Christensen
Russell Christensen

Reputation: 191

After a bit more research I have finally found an answer to this. Posting it here in hopes its helpful to anybody else trying to turn an accordion into a wizard.

My collapsible is set up like this:

 <div data-role="collapsible" data-collapsed="false" id="col1" >
     <h3>Title</h3>
     <p>
         <input type="text" />
         <input type="button" value="Next" onclick="nextClicked(1);" />
     </p>
 </div>

To stop the click from working but maintain being able to trigger the expand I use this jquery:

$(document).ready(function () {
    $("#col1 h3 a").click(function (event) {
        return false;
    });
});

I had tried using preventDefault and stopPropagation but neither of these did it. Apparently return false does some extra work as well as those two.

Edit: I found out that this works in a browser but does not prevent it on mobile, to prevent it on mobile you also have to capture the tap event, but be careful, you have to do it on the header and not the entire collapsible or any elements in the collapsible such as buttons will not register either. This is the code I used:

$("#col1 h3").on("tap", function (event, ui) {
    return false;
});

Upvotes: 9

Related Questions