Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-03-24
12
Medium Priority
?
602 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
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

Vim Reference Guide

Vim is a powerful text editor favored by many sysadmins and developers - here are some commands that you'll want to keep in your back pocket!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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.
This video shows information on the Oracle Data Dictionary, starting with the Oracle documentation, explaining the different types of Data Dictionary views available by group and permissions as well as giving examples on how to retrieve data from th…
The viewer will learn how to dynamically set the form action using jQuery.

704 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