CODEWITHSUNDEEP
jquery-mobile
Wookie
Wookie

Reputation: 103

jQuery Mobile collapsible listview expand direction up

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.

Upvotes: 2

Views: 1682

Answers (2)

jalake
jalake

Reputation: 1

For a project that I was working on the solution was to set bottom position. If you set absolute position and define the bottom distance, the sections will open upward.

E.g. http://jsfiddle.net/ea4duyfa/

#test-set{
position: absolute;
top: 100px;}

<div data-role="collapsibleset" data-theme="a" data-content-theme="a" id="test-set">
<div data-role="collapsible">
    <h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
    <h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
    <h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85318

Try moving the collapsible content before your collapsible element

Does this work?

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>
​

Upvotes: 3

Related Questions