jquery HELP with toggle

Question

okay so i have a log in button on the top of my site that when clicked calles some jquery to show/hide a log in box.

yet i have a search box next to it and when you click on that not only are not able to type in it but it also toggles the log in box the first code should be the jquery and the secong is the html part that calls it. btw its jquery 1.4.2. if you would like to see it you can visit http://www.stat-me.com and click log in and also try clicking the search bo

THANKS.

JQUERY:

<script src="js/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready
$(document).ready(function() {
    // trigger the function when clicking on an assigned element
    $(".toggle").click(function () {
        // check the visibility of the next element in the DOM
        if ($(this).next().is(":hidden")) {
            $(this).next().slideDown(); // slide it down
        } else {
            $(this).next().slideUp("fastS"); // hide it
        }
    });

 $(".exito").click(function () {
        // check the visibility of the next element in the DOM
        if ($(this).next().is(":hidden")) {
            $(this).next().show(); // slide it down
        } else {
            $(this).next().hide(); // hide it
        }
    });
});
</script>

HTML:

<span class="toggle" style="margin-top:-583px; margin-left:950px; position:relative;">

<a href="#">LOG IN</a>

</span>


<div class="secondehiddendiv">
<div class="chat-bubble">
  <h1 style="color:#F00">LOG IN!</h1>
<form name="login" method="post" action="login.php">
  <table style="margin-left:-5px; text-align:right; color:#F00;">
   <tr>
     <td>Email:</td>
        <td><input name="email" type="text" size="17" ></td>
    </tr>
    <tr>
     <td>Password:</td>
        <td><input name="password" type="password" size="17" ></td>
    </tr>
  </table>

  <div class="log_in_img">
  <input type="image" src="http://www.stat-me.com/images/log_in_jq.png" alt="LOG IN"  >
  </div>
</form>

  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>

</div>
</div>

Answer 1

Your .toggle span is located at the bottom of the page, and positioned to the top/right using massive margins.

Why take that approach? Why not place it in the same table where the elements are that you want to click?

The reason it isn't working, is that you have the span set to display as a block element, which means its width automatically expands to its parent's width, and therefore it is covering the search button as well as the login button.

Answer 2

Your toggle span is extending in front of the search box:

---

You could fix it by adding a width of 50px to your toggle (as you did), or better yet (as patrick suggested) add it in the relevant table:

<td>
  <span class="toggle">
    <a href="#">LOG IN</a>
  </span>
</td>