Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-03-24
12
Medium Priority
?
604 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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
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

Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

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.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Via a live example, show how to take different types of Oracle backups using RMAN.
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

971 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