Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2014-03-24
12
Medium Priority
?
608 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
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 58

Accepted Solution

by:
Gary earned 800 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 800 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

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

Question has a verified solution.

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

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 how to configure and send email from and Oracle database using both UTL_SMTP and UTL_MAIL, as well as comparing UTL_SMTP to a manual SMTP conversation with a mail server.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

581 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