• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 615
  • Last Modified:

Mobile Collapsible Listview - How do I have the first header expand on load?

Hi,
How do I have the first header expand on load in a Mobile Collapsible Listview ?

<div data-role="collapsibleset" data-inset="false">
    <div data-role="collapsible">
	<h3>Animals</h3>
	<ul data-role="listview" data-inset="false">
	    <li>Cats</li>
	    <li>Dogs</li>
	    <li>Lizards</li>
	    <li>Snakes</li>
	</ul>
    </div>
    <div data-role="collapsible">
	<h3>Cars</h3>
	<ul data-role="listview" data-inset="false">
	    <li>Acura</li>
	    <li>Audi</li>
	    <li>BMW</li>
	    <li>Cadillac</li>
	</ul>
    </div>
    <div data-role="collapsible">
	<h3>Planets</h3>
	<ul data-role="listview" data-inset="false">
	    <li>Earth</li>
	    <li>Jupiter</li>
	    <li>Mars</li>
	    <li>Mercury</li>
	</ul>
    </div>
</div>

Open in new window


thank you in advance, Bill
0
BILL Carlisle
Asked:
BILL Carlisle
  • 6
  • 6
2 Solutions
 
GaryCommented:
Something like this...

$(function() {
     $('[data-role="collapsibleset"] div:first-child').trigger("click")
})

Open in new window

0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Thank you
I had to change click to expand to get it to work but now all are expanding.
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Hi Gary,

This is what the real code looks like..

<div data-role="collapsibleset" data-inset="false">
<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-collapsible-collapsed" data-collapsed="false"><h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-left ui-corner-top ui-corner-bottom" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Demo 1<span class="ui-collapsible-heading-status"> click to expand contents</span></span><span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span></span></a></h3><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

<ul data-role="listview" data-inset="false" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" data-collapsed="false"><div class="ui-btn-text" data-collapsed="false"><a href="f?p=444:10:11788527797887::NO:10::" class="ui-link-inherit">Suppliers</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" data-collapsed="false"><div class="ui-btn-text" data-collapsed="false"><a href="f?p=444:20:11788527797887::NO:20::" class="ui-link-inherit">Total Products</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" data-collapsed="false"><div class="ui-btn-text" data-collapsed="false"><a href="f?p=444:30:11788527797887::NO:30::" class="ui-link-inherit">Sales Customers</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last"><div class="ui-btn-inner ui-li" data-collapsed="false"><div class="ui-btn-text" data-collapsed="false"><a href="f?p=444:1040:11788527797887::NO:40::" class="ui-link-inherit">Sales Orders</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
</ul></div></div>
<div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-collapsible-collapsed"><h3 class="ui-collapsible-heading "><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-fullsize ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="left" data-theme="c" data-mini="false"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Demo 2<span class="ui-collapsible-heading-status"> click to expand contents</span></span><span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span></span></a></h3><div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

<ul data-role="listview" data-inset="false" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" data-collapsed="false"><div class="ui-btn-text" data-collapsed="false"><a href="f?p=444:10:11788527797887::NO:10::" class="ui-link-inherit">TAA Supplier</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-li-last"><div class="ui-btn-inner ui-li" data-collapsed="false"><div class="ui-btn-text" data-collapsed="false"><a href="f?p=444:40:11788527797887::NO:40::" class="ui-link-inherit">Sales Auto</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
</ul></div></div>
</div>

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
GaryCommented:
$(function() {
     $('[data-role="collapsibleset"] > div:first-child').trigger("expand")
})

Open in new window

0
 
GaryCommented:
Actually it should probably be

$(function() {
     $('[data-role="collapsibleset"] > div:first-child h3 a').trigger("click")
})

Open in new window


I don't have a ready sample to test.
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
That worked...
$('[data-role="collapsibleset"] > div:first-child h3 a').trigger("click")

Open in new window


and so does..
$('[data-role="collapsibleset"] div').first().trigger("expand")

Open in new window


Is one more save than the other? As I was trying thing I had one that clicked every anchor in my page.. :)
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Oh, but now neither allows the set to function - when you click one the other should close.
0
 
GaryCommented:
The first one will only trigger on the header

The second one may trigger on the sub links being clicked (which probably doesn't matter anyway), not sure...
0
 
GaryCommented:
I'll have to throw a sample together to test unless you have a live link
0
 
GaryCommented:
Actually looking through your html you are already setting it expanded with
data-collapsed="false"

Are you saying its not working

What code are you using to close the other ones when one is clicked.

http://jsfiddle.net/GaryC123/6txWy/2070/
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Yes Gary, it doesn't close when I click the other one.. isn't there a property or class that only allows one at a time to be opened?
0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
Hi Gary,
I had
data-role="collapsibleset"
instead of
data-role="collapsible-set"
so that fixed that....

Thank you for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now