CODEWITHSUNDEEP
jquerymobilenavbar
user1642919
user1642919

Reputation: 33

jQuery Mobile collapsible menu

I am trying to create a navbar that controls the show/hide of two collapsible sections below it.

Is this possible with jQuery Mobile?

<div data-role="navbar">
    <ul>
        <li><a data-theme="c" href="#">Menu</a></li>
        <li><a href="#">Search</a></li>
    </ul>
</div>

<div data-role="collapsible">
    <div data-role="navbar" class="menu">
        <ul>
            <li><a data-theme="c" href="#">Menu</a></li>
            <li><a href="#">Search</a></li>
        </ul>
    </div>
</div>

<div data-role="collapsible">
    <form class="search">
        <label for="search-mini">Search Input:</label>
        <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
    </form>
</div>

As an example take a look at the menu on the m.nbcolympics.com site on a mobile device. I want to create a menu/search like they have on their site.

Upvotes: 0

Views: 6993

Answers (1)

Miura-shi
Miura-shi

Reputation: 4519

This should be enough to get you started and in the general direction.

http://jsfiddle.net/japaneselanguagefriend/Mf4X2/

Also check this guide out:

http://jquerymobile.com/test/docs/content/content-collapsible.html

Upvotes: 1

Related Questions