CODEWITHSUNDEEP
javascriptjquery
user3709564
user3709564

Reputation: 59

Show first 5 child elements and hide them when next button is clicked and display next 5 with jquery

So what I'm trying to do is, depending on how many paragraphs the user has, the page only displays the first 5. If you click next, it would hide the first 5 paragraphs and display the next 5... So on and so forth.

So far I seem like I've gotten to work somewhat correct. Only problem is, when I reach the end of the paragraphs I am no longer to click "previous" button to go back.

<div id="container">

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>20</p>


<button class="prev" disabled="disabled">Prev</button>
<button class="next">Next </button>

$('#container p:gt(4)').hide();

$('.prev').click(function() {
    var first = $('#container').children('p:visible:first');
    first.prevAll(':lt(5)').show();

    if(first.prevAll().length < 6){
          $('.prev').attr('disabled', false); 
    }

    first.prev().nextAll().hide();
    $('.next').show();

});

$('.next').click(function() {
    var last = $('#container').children('p:visible:last');
    last.nextAll(':lt(5)').show();

    if(last.nextAll().length < 6){ 
         $('.next').attr('disabled', false);
    }

    $('.prev').show(); 
    last.next().prevAll().hide(); 


});

View my jfiddle here, and check what I'm doing wrong. http://jsfiddle.net/h8G7t/

Thanks,

Upvotes: 1

Views: 420

Answers (1)

Joel
Joel

Reputation: 2257

Here's an updated fiddle with this corrected. http://jsfiddle.net/h8G7t/1/

You had a few issues going on. First is that you were enabling/disabling your buttons incorrectly (setting them to false, when they should have been true). And you weren't toggling the enabled state of the opposite button when needed.

The main issue was that your nextall and prevall needed to have a selector for the p tags because they were picking up the button elements and breaking the navigation.

if(last.nextAll('p').length < 6){ ... }

Upvotes: 2

Related Questions