javascript - Show only one block with jquery and hide other block when user click another block or second click happened -

this form. when user click edit input show. , when he/she click save/ cancel button hide.

and when user click 1 block , not close 1 block save or cancel , click block open block hide.

its similar facebook settings page. when user can open 1 edit block.

facebook settings page

i have tried following script (jsfiddle) not expected result.

here js fiddle 2

<form class="skylarkform userinfoedit" method="post" action="javascript:void(0)">     <table class="table">         <tr>             <td>display name</td>             <td class="displayinfotd"> <span id="fname_span"> ahmad </span>              </td>             <td class="editinfotd">                 <input type="text" name="fname" id="fname" value="ahmad">                 <ul class="margin-top-10">                     <li>                         <button type="button" id="fname_save" name="fname_save" class="skylarksmallbtn savetrigger"><i class="fa fa-check font-size-10"></i> save</button>                     </li>                     <li>                         <button type="submit" class="skylarksmallbtn white canceltrigger"><i class="fa fa-close"></i> cancel</button>                     </li>                 </ul>             </td>             <td class="triggertd"> <a href="javascript:void(0)" class="edittrigger" data-toggle="tooltip" data-placement="top" title="edit display name"> <i class="fa fa-pencil font-10 margin-left-10"></i> edit </a>              </td>         </tr>         <tr>             <td>email address</td>             <td class="displayinfotd"> <span id="email_span"> ahmad </span>              </td>             <td class="editinfotd">                 <input type="email" name="email" id="email" value="email address">                 <ul class="margin-top-10">                     <li>                         <button type="button" id="email_save" name="email_save" class="skylarksmallbtn savetrigger"><i class="fa fa-check font-size-10"></i> save</button>                     </li>                     <li>                         <button type="button" id="" name="" class="skylarksmallbtn white canceltrigger"><i class="fa fa-close"></i> cancel</button>                     </li>                 </ul>             </td>             <td class="triggertd"> <a href="javascript:void(0)" class="edittrigger" data-toggle="tooltip" data-placement="top" title="change email address"> <i class="fa fa-pencil font-10 margin-left-10"></i>edit </a>              </td>         </tr>         <tr>             <td>password</td>             <td class="displayinfotd"> <span id="pass_span" class="font-24 no-line-height"> . . . . . . . . </span>              </td>             <td class="editinfotd">                 <input type="password" name="cur_password" id="cur_password" placeholder="current password">                 <input type="password" name="new_password" id="new_password" placeholder="new password">                 <input type="password" name="confirm_new_password" id="confirm_new_password" placeholder="repeat new password">                 <ul class="margin-top-10">                     <li>                         <button type="button" id="password_save" name="password_save" class="skylarksmallbtn savetrigger"><i class="fa fa-check font-size-10"></i> save</button>                     </li>                     <li>                         <button type="submit" class="skylarksmallbtn white canceltrigger"><i class="fa fa-close"></i> cancel</button>                     </li>                 </ul>             </td>             <td class="triggertd"> <a href="javascript:void(0)" class="edittrigger" data-toggle="tooltip" data-placement="top" title="change password"> <i class="fa fa-pencil font-10 margin-left-10"></i> edit</a>              </td>         </tr>     </table> </form> <!-- end form --> 

and scripts

 ![$(function () {      $('.editinfotd').hide();      $('a.edittrigger').click(function (event) {          $(this).parent('td.triggertd').siblings('td.displayinfotd').hide(10);          $(this).parent('td.triggertd').siblings('.editinfotd').show(10);      });       $('.savetrigger').click(function (event) {          $(this).closest('td.editinfotd').hide(10);          $(this).closest('td.editinfotd').siblings('td.displayinfotd').show(10);      });        $('.canceltrigger').click(function (event) {          $(this).closest('td.editinfotd').hide(10);          $(this).closest('td.editinfotd').siblings('td.displayinfotd').show(10);      });  }); 

i took liberty edit html. first removed unrelated attributes , clases.

then separated columns of each section in 2 rows. first row, class information, shown when section closed.

the second row, contains inputs, , shown when click edit.

    <tr class="information">         <td>display name</td>         <td>ahmad</td>         <td>             <a class="edittrigger" href="#">edit</a>         </td>     </tr>     <tr class="detail">         <td colspan="3">             <input type="text" name="fname" id="fname" value="ahmad" />             <ul>                 <li>                     <button type="button" class="savetrigger">save</button>                 </li>                 <li>                     <button type="button" class="canceltrigger">cancel</button>                 </li>             </ul>         </td>     </tr> 

after that, matter of show or hide entire rows. first have function reset table initial state.

function resetstate() {     $(".detail").hide();                     // close details     $(".information").show();                // show headers }; 

and then, on each button, show or hide corresponding rows.

$(".edittrigger").click(function() {     resetstate();     $(this).parents("tr").hide();            // hide current header     $(this).parents("tr").next("tr").show(); // show current detail });  $(".canceltrigger").click(function() {     resetstate(); }); 

you can see my version of fiddle here

i hope looking for.