how to get collapsible listview for android using phonegap

Question

I have 3 list view named

activities-today, activities-this week, activities-this month.

I want to use collapsible list view format to show the lists. I've seen an example of collapsible list view using jquery mobile but i want to achieve this with java script,html and css. can anyone help me? enter image description here

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

Thank you.

score 1 · Accepted Answer · answered Jun 06 '12 at 10:53

1

Try this way:

<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/

answered Jun 06 '12 at 10:53

dhaval

7,611
3
29
38

user is not wanting to do this with jquery-mobile. He wants only javascript-css-html; – Th0rndike Jun 06 '12 at 11:08
@dhaval hi thanks for response i used jquery in my code to get collapsible listview as u said and i also felt that jquery is pretty easy to achieve this. I'm using – android phonegap Jun 07 '12 at 05:00
may be you can just include the listview specific css from here https://github.com/jquery/jquery-mobile/blob/master/css/structure/jquery.mobile.listview.css – dhaval Jun 07 '12 at 05:16
check this fiddle - http://jsfiddle.net/dhavaln/UCDfU/. includes limited css def from collapsible, listview and theme. You may still need to tweak/remove few things if required. – dhaval Jun 07 '12 at 07:06

Th0rndike · Answer 2 · 2012-06-06T11:44:34.170

I have set this jsfiddle for you, click on the title and the content will show up:

jsfiddle

Basically, with the onclick event of the title you decide wether to show or hide the content, and you change the title so it changes the +/- symbols. Of course this example only shows you how to implement the logic, but there are no nice looking styles applied to it.

the html:

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

the handleCollapsible(id) function:

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 much easier. Doing it with jquery-mobile would be MUCH easier. The bad thing about this code is the need to add the onclick event to every collapsible, including the id, which is avoidable and much simpler with jquery.

hi thanks for response i used jquery in my code to get collapsible listview as u said and i also felt that jquery is pretty easy to achieve this. I'm using — android phonegap, Jun 07 '12 at 01:24
well, since you wrote that you didn't want to use jquery i set up this pure javascript thingy... hope will be useful for someone else since it took some effort :) — Th0rndike, Jun 07 '12 at 10:55

jiten · Answer 3 · 2012-06-06T11:33:47.580

I think you want to use nested listview.....

<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>

how to get collapsible listview for android using phonegap

3 Answers3

Linked