CODEWITHSUNDEEP
javascriptjquerycssdjango
Unknown Coder
Unknown Coder

Reputation: 813

Using display:none hides all elements in jQuery

I'm using jQuery to display 10 elements at a time. Here is my code

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 is the code to display the song list

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

Here is the css

#song_list div {
    display:none;
}

This displays no results and just the Load more button. What is wrong with the code?

Upvotes: 1

Views: 274

Answers (2)

Ringo
Ringo

Reputation: 3965

In your code you're hiding all of div tag in #song_list. So if you want to hide except the first one, just do this:

#song_list div:not(div:first-child) {
    display:none;
}

Or you can show what you want with jquery:

#song_list div {
        display:none;
    }

Javascript:

$('#song_list div').slice(1,10).show();

Upvotes: 5

gee
gee

Reputation: 72

The issue is not about the css, your display:none to hide all first is reasonable.

can you make sure that

 $('#song_list div:lt('+max_items_page+')').show();

runs correctly? I mean that piece of code do run after the divs are rendered.

Upvotes: -2

Related Questions