Question

I am trying to setup a table to toggle additional ‘detail’ rows. Essentially, the table is loaded, if a row is clicked, it will insert a ‘details’ row after said row. If said row is clicked again, it will remove the ‘details’ row. The following yields unexpected results. I was wondering what the best approach would be?

jQuery('.tasks-table tbody tr').toggle(
    function () {
        jQuery(this).next().remove();
    }, 
    function () {
        jQuery(this).after('<tr><td colspan="10"><p style="margin-left: 50px;">lorem ipsum</p></td></tr>');
    }
);

Answer 1

toggle does not work that way: http://api.jquery.com/toggle/

what you want is:

jQuery('.tasks-table tbody tr').bind("click",
  function(){
     var $next = jQuery(this).next();
     if ($next.is(".info")) { //check if the next is .info or not
       $next.remove(); //remove it is already the .info
     }else{
       $next.before('<tr class="info"><td colspan="10"><p style="margin-left: 50px;">lorem ipsum</p></td></tr>'); 
     //add the info box (with a .info class)
     }
  }
)