How to get a picky list for android using phonegap

Question

I have 3 kinds of list with name

events today, events this week, events this month.

I want to use a collapsible list list format to display lists. I saw an example of a dropable list using jquery mobile, but I want to achieve this with java script, html and css. can anyone help me?

I want something in the way shown. Hope my question is clear.

Thanks.

Answer 1

Try as follows:

<div data-role="page" id="home"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h3>Section 1</h3> <ul data-role="listview" data-inset="true"> <li data-filtertext="11:first:one"><a href="#">one</a></li> <li data-filtertext="22:second:two"><a href="#">two</a></li> <li data-filtertext="33:third:three"><a href="#">three</a></li> <li data-filtertext="44:fourth:four"><a href="#">four</a></li> </ul> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>I'm the collapsible set content for section B.</p> </div> </div> </div> </div> ​ 

Full source http://jsfiddle.net/dhavaln/UCDfU/

Answer 2

I installed this jsfiddle for you, click on the header and the contents will display:

jsfiddle

Basically, with the onclick event of the title, you decide whether to show or hide the content, and you change the title to change the +/- characters. Of course, this example only shows how to implement logic, but beautiful styles are not applied to it.

html:

 <div class='collapsibleCont'> <h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ title</h3> <p style="display:none" class='collapsibleContent'>helloooooooooooo</p> </div> 

function handleCollapsible (id):

 function handleCollapsible(id){ var clickedTitle = document.getElementById(id); var contentC = clickedTitle.parentNode.childNodes[1]; if(contentC.style.display=='none'){ contentC.style.display = 'block'; var mysplittedtitle = clickedTitle.innerHTML.split(" "); var newTitle = "- "+mysplittedtitle[1]; clickedTitle.innerHTML =newTitle; }else{ contentC.style.display = 'none'; var mysplittedtitle = clickedTitle.innerHTML.split(" "); var newTitle = "+ "+mysplittedtitle[1]; clickedTitle.innerHTML=newTitle; } } 

Doing this with jquery would be a lot easier. Doing this with jquery-mobile would be a lot easier. The bad thing about this code is the need to add an onclick event to each minimized, including an identifier that can be avoided and is much easier with jquery.

Answer 3

I think you want to use a nested list ...

 <h3>Nested List Example</h3> <ul data-role="listview"> <li>Restaurants <ul> <li>French <ul> <li>Le Central</li> <li>Bistro Vandome</li> <li>Antoine's</li> </ul> </li> <li>Cajun and Creole <ul> <li>Bayou Bob's</li> <li>Pappadeaux</li> <li>Lucile's</li> </ul> </li> <li>American <ul> <li>Dixon's</li> <li>Vesta Dipping Grill</li> <li>Steuben's</li> </ul> </li> </ul> </li> </ul>