Question

I am attempting to have a jQuery Mobile collapsible listview expand upwards instead of the default downwards direction. The listview code I have is:

<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1">
<h1>Menu</h1>
    <ul data-role="listview" id="lvpage1">
    <li data-icon="false"><a href="#page2">Page2</a></li>
    <li data-icon="false"><a href="#page3">Page3</a></li>
    <li data-icon="false"><a href="#page4">Page4</a></li>
</ul>
</div>

When the Menu h1 tag is clicked, the listview expands downwards. What I’m trying to do is get the menu to expand out the top of the Menu h1 tag, so the Menu h1 tag then appears at the bottom of the listview with all li items above it.

I’m guessing it has something to do with binding the slideUp effect (which normally hides a div) to the expand event but can’t figure it out!

Any help would be appreciated.

Answer 1

Try moving the collapsible content before your collapsible element

Does this work?

• http://jsfiddle.net/SnRx8/

JS:

$('.ui-collapsible-content').insertBefore('#mpage1');

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1">
<h1>Menu</h1>
    <ul data-role="listview" id="lvpage1">
    <li data-icon="false"><a href="#page2">Page2</a></li>
    <li data-icon="false"><a href="#page3">Page3</a></li>
    <li data-icon="false"><a href="#page4">Page4</a></li>
</ul>
</div></div>
</div>
​