Question

1. I have two input fields that need to hide when first visit.
2. There will be a button to toggle it to show the fields so it could be edited.
3. The appending word (i.e. _temp) with the id is just to change the id name so that it doesn’t save over again if it’s not necessary. When the fields are showing the append word (_temp) needs to be removed.
   (i.e. (Original Id Name: payment_gateway_login) (Append Id Name: payment_gateway_login_temp), when fields are showing remove append id name so it should be back to original: payment_gateway_login, the same should follow with id=”payment_gateway_password”.
4. Below is as far as I can get. Any help would be greatly appreciated.

HTML:

<ul>
  <li class="show-hide-container hide" style="display: list-item; ">
    <ol>
      <li class="password input required stringish" id="payment_gateway_login_input">
        <input id="payment_gateway_login" name="payment_gateway[login]" type="password">
     </li>
     <li class="password input required stringish" id="payment_gateway_password_input">
       <input id="payment_gateway_password" name="payment_gateway[password]" type="password">
     </li>
   </ol>
 </li>

 <li class="clearfix edit-login-pass"> <a href="#" class="btn" id="show_hide">Edit Login &amp; Password</a>
 </li>
</ul>

​

JQUERY:

$("input#payment_gateway_login").attr("id", "payment_gateway_login" + "_temp");
$("input#payment_gateway_password").attr("id", "payment_gateway_password" + "_temp");

$("#show_hide").live("click", function(event) {
  return $("li.show-hide-container").toggle("show");
});

​

Answer 1

Are you looking for something like this?

$('#show_hide').on('click', function(event) {
   if ($('#show-hide-container').is(':visible')) {
      // container is currently visible so hide it and set id to temp
      $('#show-hide-container').hide();
      $('#payment_gateway_login').attr('id', 'payment_gateway_login_temp');
      $('#payment_gateway_password').attr('id', 'payment_gateway_password_temp');
   } else {
      // container is currently hidden so show it and remove temp id
      $('#show-hide-container').show();
      $('#payment_gateway_login_temp').attr('id', 'payment_gateway_login');
      $('#payment_gateway_password_temp').attr('id', 'payment_gateway_password');
   }
});

A few things to note:
.live() is deprecated so you may want to use .on() instead. This also won’t work unless you change the original id in the html to include _temp.

I wouldn’t recommend this approach to begin with though, changing html ids can easily lead to problems. An easier solution would be to run the visible check when you’re about to save the information:

if ($('#show-hide-container').is(':visible')) {
    // Save!
}

Hope that helps!