Question

I’m trying to set up a jquerymobile site and i’m having a little trouble with the accordion menu on the front page, Here is a working example of the accordion without jquerymobile: http://dl.dropbox.com/u/22874377/Mobile/accordion.html but when used with jquerymobile it doesn’t work as seen here: http://dl.dropbox.com/u/22874377/Mobile/app.html

Pretty much what’s happening is even though I have it set as an accordion it forces the page transitions from jquerymobile and trys to load the child list items as if they were contained on a separate page

Any ideas as to why this might be? or what i can do to work around it?

here is the simple script if you don’t want to view the working examples

<style>
#nav li ul {
display: none; // used to hide sub-menus
}
</style>
<script>
$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
    $('#nav > li > a:eq('+checkCookie+')').next().show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
      $.cookie("nav-item", navIndex);
      $('#nav li ul').slideUp();
       if ($(this).next().is(":visible")){
       $(this).next().slideUp();
       } else {
       $(this).next().slideToggle();
       }
   });
}); 
</script>
<ul id="nav" data-role="listview" data-inset="true">
                <li data-theme="c">
                    <a href="#home" data-transition="flip">
                        Home
                    </a>
                </li>
                <li data-theme="c" data-icon="arrow-d">
                    <a href="#">
                        Info
                    </a>
                    <ul>
                    <li data-theme="c"><a href="#" data-transition="flip">About Katie</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Availability</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Pricing</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Contact</a></li>
                    <li data-theme="c"><a href="#" data-transition="flip">Downloads</a></li>
                    <li data-theme="c"><a href="#home" data-transition="flip">Back to Home</a></li>
                    </ul>
                </li>
                <li data-theme="c">
                    <a href="#home" data-transition="flip">
                        Galleries
                    </a>
                </li>
                <li data-theme="c" data-icon="arrow-d">
                    <a href="#home" data-transition="flip">
                        Client Proofs
                    </a>
                    <ul>
                    <li data-them="c"><a href="#" data-transition="flip">Monica &amp; Andrew's Excellent Wedding</a></li>
                    <li data-theme="c"><a href="#home" data-transition="flip">Back to Home</a></li>
                    </ul>
                </li>
                <li data-theme="c">
                    <a href="#home" data-transition="flip">
                        Testimonials
                    </a>
                </li>
            </ul>

Answer 1

quickly, just by inspecting your different link element in the exemple, you can see they have
home&ui-page=nav-(a number) as href attribute, which cause it to open a new page : …Mobile/app.html#home&ui-page=nav-0

this is why it opens in a new page, the href attributes should be empty (or #) since you wont be using it to navigate your site and simply use it to activate the slide up-down …

(as for why they get this, its probably because of your automatic UI … but I cant help you there )