Load more content doesn't work when pressing button

Question

$(function(){
    $("#list li").slice(0, 1).show(); 
    $("#load").click(function(e){
        e.preventDefault();
        $("#list li:hidden").slice(0, 3).show(); 
    });
});

ul{background:pink; width:80%; height:auto; padding:2%; list-style-type:none;}

li{background:red; width:100%; margin:1%; color:white}

#load{color:white; background:red; text-decoration:none; margin:0% 0% 0% 40%; padding:1%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id=”list”>item 1</li>
<li id=”list”>item  2</li>
<li id=”list”>item 3 </li>
<li id=”list”>item  4</li>
<li id=”list”>item 5 </li>
<li id=”list”>item  6</li>
<li id=”list”>item  7</li>
<li id=”list”>item  8</li>
<li id=”list”>item  9</li>
<li id=”list”>item  10</li>
</ul>

<a href="#" id="load">Load More</a>

I'm trying to create a list that loads other items when the user clicks the button. The Jquery code above targets the "#list li", but for some reason it doesn't work when I click the button.

What am I doing wrong here?

https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page — Taplar, Feb 06 '19 at 19:32
your selector is wrong, `li:hidden` and there is no hidden li presented. all li are visible — Alen.Toma, Feb 06 '19 at 19:32
`"#list li"` doesn't match any elements in the code you have provided. Neither does `"#list li:hidden"` for similar reasons. — Kevin B, Feb 06 '19 at 19:33
Yepp @Kevin B is right to so there is no hidden li and also you dont need the li: just `#list:hidden` and it should be a class and not an id if there is more then one. — Alen.Toma, Feb 06 '19 at 19:35

score 0 · Accepted Answer · answered Feb 06 '19 at 19:35

None of the items were hidden in the first place (though I assume this was an artifact of the question rather than your real code).
Duplicate IDs are invalid HTML; jQuery will only ever be able to access the first element with a given ID.
#list li would select a list item which is a child of #list, but in your case it's the same element (so should have been li#list).

Here's a corrected version, using classes instead of IDs:

$(function(){
    $("li.list").slice(0, 1).show(); 
    $("#load").click(function(e){
        e.preventDefault();
        $("li.list:hidden").slice(0, 3).show(); 
    });
});

ul{background:pink; width:80%; height:auto; padding:2%; list-style-type:none;}

li{background:red; width:100%; margin:1%; color:white; display:none}

#load{color:white; background:red; text-decoration:none; margin:0% 0% 0% 40%; padding:1%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="list">item 1</li>
  <li class="list">item 2</li>
  <li class="list">item 3</li>
  <li class="list">item 4</li>
  <li class="list">item 5</li>
  <li class="list">item 6</li>
  <li class="list">item 7</li>
  <li class="list">item 8</li>
  <li class="list">item 9</li>
  <li class="list">item 10</li>
</ul>

<a href="#" id="load">Load More</a>

Thank you, Daniel! This works perfectly. Was your solution down voted? Thank you everyone for your suggestions. — Majora, Feb 06 '19 at 20:38
It did collect a downvote, not sure why but it happens sometimes, no big deal. Anyway, glad I could help! — Daniel Beck, Feb 06 '19 at 20:42

Load more content doesn't work when pressing button

1 Answers1