隐藏div并启用按钮单击

Question

I have multiple rows

<div class="row" id="move-data-row0"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

I want only the first three to be shown and on a button click 3 more should appear.

My first thoughts were to give every div the same classname with an index but I do not know how the JavaScript should be implemented.

I started by trying to hide one div, but that doesn't really work

$("#move-data-row0").children().prop('disabled',true);

Answer 1

You can use this minimal example, or improve it to get what you really want:

HTML:

<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
<button>More</button>

JavaScript:

$(document).ready(function(){
    $('.row:gt(2)').hide();
    $('button').click(function(){
        $('.row:hidden:lt(3)').show();
    });
});

FIDDLE: https://jsfiddle.net/lmgonzalves/e0ppjwnm/