Question

I currently have the following JavaScript for a CSS table that hides and displays content on click:

function toggle2(id, link) {
 var e = document.getElementById(id);
  if (e.style.display == '') {
   e.style.display = 'none';
  } else {
   e.style.display = '';
  }
}

Then I have the following code to display an input box under “question”:

<li>
  <a href="#" onclick="toggle2(\'question\', this);">Question
   <div id="question" style="display:none; margin:0px;">
    <input type="text" />
  </div>
  </a>
</li>

the problem is, when I click the input box which I need to keep in the block, the box goes away. I need that box to stay, how can I achieve this without affecting the other stuff?

Answer 1

Because when you click the input box, you also “click” the <a>. Move it out:

http://jsfiddle.net/d33zC/

Notice the display:inline-block on the <div> if you want the input box to stay in one line with the link.

Edit:

Extending from comment, it seems this is what you’re looking for:

http://jsfiddle.net/d33zC/5/

Move border-bottom from a to li.