toggleclass - Jquery Slidetoggle: Why does it reload my page? -

i'm having strange issue 2 slidetoggles. #bannerchoice slide works fine, #search slide, should, when open, overlap #bannerchoice, never opens more partway. instead, forces page reload.

here's code:

function bannerchoice() {     $('#bannerchoice').slidetoggle(function()     {         if($('#bannerchoice').is(':visible'))         {             $('html').css({overflow:"hidden",height:"100%"});         }         else         {             $('html').css({overflow:"auto",height:"2171px"});         }     }); }  function toggleform() {     $('#search').slidetoggle(350);     return false; } 

and

<div id="bannerchoice">     <div id="bctext">select banner graphic:<br/></div>     <div id="bcimages">         <form action="#" method="post">             <input type="hidden" name="setbanner" id="setbanner" value="">             <img src="/media/profile/images/bgs/bg1_thumb.png"                  onclick="setbanner(1,event);"/>             <img src="/media/profile/images/bgs/bg2_thumb.png"                  onclick="setbanner(2,event);"/>             <img src="/media/profile/images/bgs/bg3_thumb.png"                  onclick="setbanner(3,event)" />             <img src="/media/profile/images/bgs/bg4_thumb.png"                  onclick="setbanner(4,event)" /><br/>             <span id="bcbttns">                 <input type="submit" value="submit" class="submit"                  name="bttnsubmit" /><input type="button" value="cancel"                  onclick="bannerchoice()">             </span>         </form>     </div>      <div id="bcbg">&nbsp;</div> </div> 

and

<span onclick="toggleform()">     <a href="" style="display:inline-block; color:#bbb; padding:0 13px;         line-height:70px;">link text</a></span>     <div style="padding-left:13px; z-index:9004">         <form id="search" method="post" action="#">         <input type="text" name="name" value="name" style="width:112px"/><br/>         <input type="text" name="city" value="city" style="width:112px" /><br/>         <input type="text" name="state" value="state" style="width:112px" /><br/>         <input type="text" name="zip" value="zip" style="width:112px" /><br/>         <input type="button" class="submit" style="margin:0 13px 0 13px;"                value="search">     </form>     </div> 

the jquery not causing page refresh. when click link in span, page go url "", i.e. reloading current page.

you need add e.preventdefault() script prevent link performing default action (going link):

function toggleform(e) {     e.preventdefault();     $('#search').slidetoggle(350); } 

and need add event call:

onclick='toggleform(event)' 

bannerchoice() not reload page, because on cancel button, not post part of default action.

as others have said here, inline javascript not idea. makes code unreadable, difficult debug, , prevents reusing code easily. there no (good) reason use inline javascript jquery.