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