Textbox appears when clicking a href

[TeddyKiller]

If I have something simple like this..

<div style="border:1px solid black;">
<div id="edit" style="float:right; width:100px;"><a href="#">Edit</a> - <a href="#">Clear</a></div>
<div style="float:left; width:200px;>MyUsername</div>
<div id="status" style="margin-left:205px; margin-right:105px;">My Status</div>
</div>

How would I make it so that.. when a user clicks edit, it removes the #edit & #status div.

Replacing it with another div with a textbox and a button.

 

I could do something similar, without javascript, although I need it to appear in the exact same spot.

Any help?

 

Thanks

[Axeia]

an easier way (that takes way less code) would be to wrap what you want to replace in something like 

<div id="replaceMyContent"><div id="status"></div></div>

 

and then do a

<a href="javascript:document.getElementById('replaceMyContent').innerHTML = '<textarea>Hi, Im new</textarea>';">edit</a>

[TeddyKiller]

Thanks Axeia. I found something else and came up with this.

Sorry that its in PHP..

 

<script type="text/javascript">
  function showPane(id) {
  var e,i;
  var PID = "displaystatus"; // the id of the parent element
  var p = document.getElementById(PID); // parent element
  // loop through each of the childNodes of the parent element
  for (i=0; i<p.childNodes.length; i++) {
    e = p.childNodes[i];
    if (e.nodeType!=1) continue; // pass over non-element nodes
    if (e.getAttribute("id") == id) {
      e.style.display = "block";
    }
    else {
      e.style.display = "none";
    }
  }
}
</script>

<?php $query = mysql_query("select * from `user_status` where `user_id` = '$user->id' order by `posted` DESC LIMIT 1");
$msta = mysql_fetch_array($query);
$html_status = (empty($msta['status']) ? '<em>Has no status.</em>' : $msta['status'] . ' Posted on: ' . time_since($msta['posted']));
                  
echo '<div style="border:1px solid black; padding:5px;">
                  
   <div style="float:left; width:100px; text-align:left;">' . ucwords($user->username) . '</div>
                        
   <div id="displaystatus" style="margin-left:105px;">
                           
      <div id="status">
                              
         <div style="float:left; width:350px; text-align:left;">' . $html_status . '</div>
                              
         <div style="margin-left:355px; text-align:right;">
            <a href="#editstatus" onclick="showPane(\'editstatus\')">Edit</a> - <a href="#">Clear</a>
         </div>
                              
      </div>
                        
      <a name="editstatus"></a>
          <div id="editstatus" style="text-align:left;">
             <form action="" method="post">
            <input type="text" name="status" size="50" value="' . $msta['status'] . '"/>
            <input type="submit" name="submit" />
         </form>
      </div>
                           
   </div>
                        
   <script type="text/javascript">showPane("status");</script>
                      
</div>';?>

 

Although now I want to make it so theres a method to reverse it. So go back to the #status div.

So clicking anywhere off of #editstatus div, will result back to the #status div being displayed.

 

showPane("status");

This would display the #status div again. Though I'm not sure where it'd go to do what I'd like.

Any help? Thanks!

[satya61229]

Actually you need several things. The code about show and hide is the code you have:

 

  if (e.getAttribute("id") == id) {
      e.style.display = "block";
    }
    else {
      e.style.display = "none";

Other than that you need to check which element you passed and what is the status of that element. Above it is checking if it is block (make it appear) then make it none (make it disappear).