jQuery Mobile panel won't hide

Question

I'm trying to add a jQuery mobile slide panel. I can get the slider to pop out which is triggered by an anchor link but it won't hide again. Do I need to add an addition jquery script?

<div data-role="page">

<div data-role="panel" id="mypanel">
    <h1>This panel won't disappear</h1>
</div><!-- /panel -->
<body>
    <div class="wrapper">
    <div id="temp-speech"><a href="#mypanel"><img src="images/speech_bub.png" /></a></div>
</div>

</div><!-- page -->
</body>

I've created an updated fiddle http://jsfiddle.net/AZLWd/

Page div should be inside body tag. Your html syntax isn't correct. Add `data-rel="panel"` to anchor which opens the panel. — Omar, Feb 16 '14 at 07:13
@Omar thanks, it still doesn't close though. I changed the anchor to `` is that correct? — rizzledon, Feb 16 '14 at 07:25
Is the panel placed under page div directly? Are you using `data-dismissible="false"` on the panel? Pls add more details. — Omar, Feb 16 '14 at 08:01
I'm not using `data-dismissible="false"` This is a temp page I'm testing on, all it has in the html is what's posted above besides your two suggested changes. — rizzledon, Feb 16 '14 at 08:10
Then if you click outside the panel it should close by itself. — Omar, Feb 16 '14 at 08:12
You should wrap page contents in `
` http://jsfiddle.net/Palestinian/AZLWd/2/ — Omar, Feb 16 '14 at 09:16
ahhh legend, thank you :) Do you want to post it as an answer so I can give you the accolades? — rizzledon, Feb 16 '14 at 09:26
I'll post a comprehensive answer later. Im using mobile now. — Omar, Feb 16 '14 at 09:39

score 1 · Accepted Answer · answered Feb 17 '14 at 18:15

Upon opening a panel, checks for .ui-header (internal), .ui-content and .ui-footer (internal) to wrap them in .ui-panel-wrappr div. That div (.ui-panel-wrapper) receives open and close animation classes. If panel fails to find any of the aforementioned div's, the close animation classes won't be added and panel remains open.

Panel widget:

_getWrapper: function () {
     var wrapper = this._page().find("." + this.options.classes.pageWrapper);
     if (wrapper.length === 0) {
         wrapper = this._page().children(".ui-header:not(.ui-header-fixed), .ui-content:not(.ui-popup), .ui-footer:not(.ui-footer-fixed)")
             .wrapAll("<div class='" + this.options.classes.pageWrapper + "'></div>")
             .parent();
     }
     return wrapper;
 },

In light of the above, any page should contain at least a header, footer or a content div in order to function as it should.

<div data-role="page">
  <div data-role="panel">
    <!-- panel content -->
  </div>
  <div role="main" class="ui-content">
    <!-- contents -->
  </div>
</div>

jQuery Mobile panel won't hide

1 Answers1