arrays - javascript loop needed to show hidden list onclick one at a time -

arrays - javascript loop needed to show hidden list onclick one at a time -

i have list of hidden divs , able show 1 div @ time, when button pressed, .. having hard time writing proper loop this.

product_options: function() { var product_option = $('.product_product_options_option_name') $(product_option).css("display", "none"); $('.add_product_option').on('click', function (e) { e.preventdefault(); $(product_option).each(function(){ $(this).css("display", "block") }); }); }

currently displays them onclick, deleted other loop attempts, bc egregiously wrong or not doing much

try

product_option.first().show(); //show first 1 product_option = product_option.slice(1); //remove first 1

demo: class="snippet-code-js lang-js prettyprint-override">$(function() { var options = $('.product_option').hide(); $('.add').click(function() { if(options.length) { options.first().show(); options = options.slice(1); } }); }) class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product_option">option 1</div> <div class="product_option">option 2</div> <div class="product_option">option 3</div> <div class="product_option">option 4</div> <div class="product_option">option 5</div> <div class="product_option">option 6</div> <div class="add">add product option</div>

javascript arrays loops