Question

I have this code for my mobilesite:

<div data-role="page" id="home">

    <div data-role="header">
        <h1>home</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>some text</p>


    </div><!-- /content -->

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
        <ul>  
        <li><a href="#home" data-iconpos="right" data-icon="star" data-transition="slide">home</a></li> 
        <li><a href="#contact" data-iconpos="right" data-icon="info" data-transition="slide">contact</a></li> 

        </ul> 
    </div> 
</div> 

</div><!-- /page home -->

and now i would like to have a 2 row navbar:

The first row with a button for show/hide the navbar and the second row with the navbar that will only shown if i click on that button.

My problem is i cant find anything like a show/hide button for that navbar in jquerymobile.
So i hope someone have a other solution.

thank you

Answer 1

Look into the jquery .toggle function, below is some code ive cobbled together but not tested, all it does is use the jquery toggle function when the button is clicked to show/hide the html element with id=navbar. you’ll have to position the button and navbar yourself with css…

<a id="showHideNav" onclick="$.("#navbar").toggle();" data-role="button">Show/Hide Nav</a>

    <div id="navbar" data-role="navbar"> 
        <ul>  
        <li><a href="#home" data-iconpos="right" data-icon="star" data-transition="slide">home</a></li> 
        <li><a href="#contact" data-iconpos="right" data-icon="info" data-transition="slide">contact</a></li> 

        </ul> 
    </div> 
</div>