Question

I am trying to add a panel to use as a side menu, but it looks like I am doing something wrong. I’ve tried troubleshooting it but can’t see where the issue is.

The panel is not hidden by default (not sure if that’s how it should behave) and I can’t get it slide out/in.

Here’s what I have. I appreciate your help.

<!-- @ Page = menu -->
<div data-role="page" id="menu">

    <div data-role="panel" id="myPanel" class="main_nav" data-display="push"  data-dismissible="true" data-theme="a">

        <div class="nav_profile">
            <div class="nav_thumb"><img src="images/nav_thumb.png" width="64" /></div>
            <div class="nav_name">
                <h3>user</h3>
                <p>2 active threads</p>
            </div><!--/nav_name-->
        </div><!--/nav_profile-->


    </div><!-- /panel -->

    <div data-role="header" class="header" data-position="fixed" role="banner" >

        <h3>Threads (2)</h3>
        <a href="#" class="right menu_button">New</a>
    </div>

    <div data-role="content">
        <a href="#myPanel" data-rel="panel" data-role="button" class="menu_icon left" ></a>
        <div class="head_search">
            <input type="text" class="search rounded" placeholder="Search" />
        </div>


    </div>

</div><!--/menu-->

Answer 1

It’s here: http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

A panel’s visibility is toggled by a link somewhere on the page or by
calling the panel’s open method directly. The defaults place the panel
on the left and it will be revealed. Open a panel programmatically
like this:

$( "#idofpanel" ).panel( "open" , optionsHash );

To control a panel from a link, point the href to references the ID of
the panel you want to toggle (mypanel in the example above). This
instructs the framework to bind the link to the panel. This link will
toggle the visibility of the panel so tapping it will open the panel,
and tapping it again will close it.

<a href="#mypanel">Open panel</a>

I put your code in a jsFiddle and found no problems, the panel opens properly: http://jsfiddle.net/Twisty/Ej7A7/1/

Make sure you’re using the latest JQuery and JQM Frameworks.