I have a jQuery script that is meant to display 10 elements at a time on my webpage. Here is the current code snippet:
var max_items_page = 10;
$('#song_list div:lt('+max_items_page+')').show();
var shown = null;
var items = $("#song_list").find('div').length;
$('#loadMore').on('click',function(e){
shown = $('#song_list div:visible').length+max_items_page;
if(shown < items) {
$('#song_list div:lt('+shown+')').show();
}
else {
$('#song_list div:lt('+items+')').show();
$('#loadMore').hide();
}
});
This JavaScript code should display a list of songs, here's how it looks in the HTML template:
<div id='song_list'>
{% for song in dj_song_list %}
<div>
<p class="song"><h3>#{{ forloop.counter}} {{ song.name }}</h3></p>
</div>
{% endfor %}
</div>
<button id='loadMore'>Load more</button>
And here is the corresponding CSS styling:
#song_list div {
display:none;
}
Currently, this setup only shows the "Load more" button without displaying any results. Could use some help identifying what's wrong with the code.