collapsible-set in phonegap using jquery won't work properly

Question

I am trying to create a collapsible-set in phonegap. Its pulling the RSS feed details in to create a list. I want the list to be a collapsible set.

However when I set it up how a normal collapsible-set is suppose to be, it no long imports the lists and I get a blank screen for the content are.

I have been able to get it to slightly work but I have a collapsible-set inside a listview which I do not want. However getting rid of the list and changing it all to how WC3 shows how to create a collapsible-set screws up and won't pull the feeds.

Any ideas on how to make this work correctly?

I want my list to look like this: the first example seen here: http://demos.jquerymobile.com/1.2.0/docs/content/content-collapsible-set.html

but when I set it up like this: It comes up blank.

<script type="text/javascript">
			function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';
            $.each(postlist, function(idx, data) {
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '</a>';
            });
            html += '</div>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist div[data-role=collapsible]").collapsible();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>

<div role="main" class="ui-content">
			<div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
	</div><!-- /content -->

so I tried:

<script type="text/javascript">
			function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<ul data-role="listview" data-inset="true" data-theme="a">';
            $.each(postlist, function(idx, data) {
            html += '<li>';
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry"><h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p></div>';
            html += '</a>';
            html += '</li>';
            });
            html += '</ul>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist ul[data-role=listview]").listview();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>

<div role="main" class="ui-content">
			<div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
	</div><!-- /content -->

which results in a collapsible inside a collapse, so a nested collapse, which I don’t want Here is the result: it looks similar to this: https://i.sstatic.net/8OsAU.jpg

how do I get the look that I want?

Thank you in advance,

Answer 1

Your code only creates one collapsible with all articles added to it because you put that line outside the $.each(). Also, you can't surround the whole collapsible in an anchor, because the collapsible header anchor toggles the collapsible open and closed. Instead, you can either surround the content or add a button/limk within the content:

function initializeLifeHacker() {
    url = 'http://feeds.gawker.com/lifehacker/full';
    var feed = new google.feeds.Feed(url);
    feed.setNumEntries(25);
    feed.load(function (result) {
        var postlist = result.feed.entries;
        var html = '';
        $.each(postlist, function (idx, data) {
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';           
            html += '<h2>' + data.title + '</h2>';
            html += '<p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '<a href="#" class="ui-btn" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">Open Article...</a>';
            html += '</div>';
        });

        $("#lifeHackerFeedlist").append(html).find("div[data-role=collapsible]").collapsible();
    });
}

Working DEMO