javascript - JQuery Slide in on Div.Show -

i'd preface fact very new javascript , jquery. have moderate amount of css , html knowledge however.

i have managed create set of div's shown in lots of four, , hide again on button clicks. javascript is:

function show() {     $('div:hidden').slice(0, 4).show();     $('#hide').show(); }  function hide() {     $('.block').hide();     $('.block:lt(4)').show();     $('#hide').hide(); } 

fiddle

however next thing want, , herein lies question, make next 4 slide(down) in, instead of pop. have googled, , overflowed, binged! , unfortunately cant see way in way beginner javascript/query mind understands enough modify.

would appreciate help, tips, or nudges in right direction!

the answer in question. there jquery animation called slidedown(to show) , 1 slideup(to hide). see http://api.jquery.com/slidedown/

instead of show() , hide(), use slidedown() , slideup() , divs slide. this:

function show() {     $('div:hidden').slice(0, 4).slidedown();     $('#hide').show(); }  function hide() {     $('.block:gt(3)').slideup();   $('#hide').slideup(); } 

fiddle: https://jsfiddle.net/ydlgssnf/1/