javascript - Toggle class show div content(buttons and text field) above the text -

i using toggle functionality .i facing 1 problem when click button buttons , text field display above text. explain used toggle functionality on button click.

here fiddle http://jsfiddle.net/naveennsit/jpvay/16/

if used top :145px working fine.but not . should this. if user click button contend goes down , display buttons , text field.if user click again button contend goes up.

$(document).on('click', '#test', function() {     $("#searchbar").toggle("slow"); }); 

change position property of wrapper relative shown below , should work. (note: have changed top value also).

#wrapper {     position:relative; //modified     z-index:1;     top:0px; //modified     bottom:48px;     left:0;     width:100%;     height:100px;     overflow:auto; } 

the difference between absolute , relative , when have position absolute , takes position container having relative position, default body of page.here when give position absolute , elements takes positioning body , when have positioning relative , takes positioning current container #wrapper

demo

edit: link explains difference between various positioning values.