CODEWITHSUNDEEP
htmljquerycss
Ruochan Liu
Ruochan Liu

Reputation: 157

Load more button not displaying anything

I am trying to display additional content, but my code is not working. I cannot seem to find anything wrong in the code, help is greatly appreciated. Thank you.

<head>
<style>
  #more { display: none; }
</style>
</head>

<body>
<p>Content</P>
<span id="more">
  <p>Content</p>
</span><span id="more">
<span id="more">
  <p>Content</p>
</span><span id="more">
<span id="more">
  <p>Content</p>
</span><span id="more">
...

<a href="#" id="load">Load More</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
$(function(){
    $("#more").slice(0, 2).show();
    $("#load").click(function(e){ 
        e.preventDefault();
        $("#more:hidden").slice(0, 2).show(); 
        if($("#more:hidden").length == 0){ 
            alert("No more"); 
        }
    });
});
</script>
</body>
</html>

Upvotes: 1

Views: 250

Answers (1)

Rene
Rene

Reputation: 1204

Hints for your approach:

You have different mistakes in your code:

  1. You have more than one id="more".
  2. You try to use an opening <span> tag but you don't use the closing part </span>.

Here is a small working example similar to your code but it is not the best solution for your problem.

I changed html id to class to query more than one <span> element

$(function(){
    var nextMore = 0;
    $("#load").click(function(e){ 
        e.preventDefault();
        $(".more").slice(nextMore, nextMore + 1 ).show();
        nextMore += 1;
        if($(".more").length - nextMore == 0){ 
            alert("No more"); 
        }
    });
});
.more { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<p>Content</p>
<span class="more">
  <p>Content</p>
</span>
<span class="more">
  <p>Content</p>
</span>
<span class="more">
  <p>Content</p>
</span>

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

(More) appropriate Approach:

As mentioned by other commentators, I guess you try to do something like this to add/ append more html elements (e.g. buttons) to your html document:

$(document).ready(function(){
  $("#btn").click(function(){
    $("ol").append("<li>Content</li>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<ol>
  <li>Content</li>
</ol>

<button id="btn">Append Content items</button>

Upvotes: 4

Related Questions