Solved

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

Posted on 2014-03-24
12
596 Views
Last Modified: 2014-04-04
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
Comment
Question by:bcarlis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39950907
Something like this...

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

Open in new window

0
 
LVL 2

Author Comment

by:bcarlis
ID: 39951072
Thank you
I had to change click to expand to get it to work but now all are expanding.
0
 
LVL 2

Author Comment

by:bcarlis
ID: 39954232
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 58

Accepted Solution

by:
Gary earned 200 total points
ID: 39954245
$(function() {
     $('[data-role="collapsibleset"] > div:first-child').trigger("expand")
})

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39954252
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
 
LVL 2

Author Comment

by:bcarlis
ID: 39954289
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
 
LVL 2

Author Comment

by:bcarlis
ID: 39954293
Oh, but now neither allows the set to function - when you click one the other should close.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39954297
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
 
LVL 58

Expert Comment

by:Gary
ID: 39954298
I'll have to throw a sample together to test unless you have a live link
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 200 total points
ID: 39954372
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
 
LVL 2

Author Comment

by:bcarlis
ID: 39965302
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
 
LVL 2

Author Comment

by:bcarlis
ID: 39978782
Hi Gary,
I had
data-role="collapsibleset"
instead of
data-role="collapsible-set"
so that fixed that....

Thank you for your help!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
This video shows setup options and the basic steps and syntax for duplicating (cloning) a database from one instance to another. Examples are given for duplicating to the same machine and to different machines
Video by: Steve
Using examples as well as descriptions, step through each of the common simple join types, explaining differences in syntax, differences in expected outputs and showing how the queries run along with the actual outputs based upon a simple set of dem…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question