Page controls moving after Toggle()

Page controls moving after Toggle()

Hi All,
I'm just starting to learn using jQuery with ASP.net MVC.
I was exploring the Toggle() method to show/hide a div.
I was able to implement the toggle feature, but when i toggle the div, controls on rest of the page also move after toggle.
What if i just want to toggle the div without affecting rest of the controls on the page.
I tried using ''display: none;" and "visibility:hidden" but did'nt get expected result

It would be really helpful if you guys can jolt down some steps or redirect me to some URL which shows how to implement  such feature .

My Code is as bellow:

  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Title</title>
  7.     @Styles.Render("~/Content/css")
  8.     @Scripts.Render("~/bundles/modernizr")
  9.     @Scripts.Render("~/bundles/jquery")
  10.     @Scripts.Render("~/Scripts/jquery-ui-1.8.24.js")
  11.     @RenderSection("scripts", required: false)
  12.     <script>
  13.         $(function() {
  14.             function runEffect() {
  15.                 var selectedEffect = "blind";
  16.                 var options = {};
  17.                 $("#effect").toggle(selectedEffect, options, 100);
  18.             }

  20.             $("#button").click(function () {
  21.                 runEffect();
  22.                 return false;
  23.             });
  24.         });
  25.     </script>   
  26.     
  27. </head>
  28. <body>
  29.     <div class="rootHeader">
  30.         <h1> Some Title</h1>
  31.         <div style="align-items:flex-end;">
  32.             <a href="#" id="button">Login</a>
  33.         </div>
  34.         <div>
  35.             <div id="effect" style="display: none;">
  36.                 Login ID : <input type="text" name="txtNameS" value="txtNameS" />
  37.                 <p></p>
  38.                 Password : <input type="text" name="txtPS" value="txtPS" />
  39.             </div>
  40.         </div>       
  41.     </div>
  42.      <div>
  43.              <input type="text" name="ctrl1" value="ctrl1" />
  44.              <input type="text" name="ctrl2" value="ctrl2" />
  45.              <input type="text" name="ctrl3" value="ctrl3" />
  46.       </div>
  47. </body>
  48. </html>