Как правильно скрыть динамический блок используя Jquery?

Question

[Monitorkin]

Есть яваскрипт, который при клике по строке таблицы создает блок с данными из базы.

$('tr').click(function () {
	id = $(this).data("key");
	row= $(this);
	$.ajax({
			url: "index.php?r=admin/shop/order/orderdetails",
			//dataType: "json",
			type: "GET",
			data: {orderid: id},
			success: function (data) {
				details = data; //массив с резулт. поиска
				console.log(data);
				
				//под строкой вводим строку с деталями
				row.after('<tr id="order-details"><td  colspan="12">'+details+'</td></tr>'); 
			}			
		});	
});

После того как кликнешь и блок откроется, то следующий клик по этой же строке таблицы создает еще один такой же блок. Как сделать так чтобы при втором клике дополнительный блок закрывался?

Думаю что нужно добавлять какой-то класс и по нему ориентироваться, но опыта не хватает. Подскажите пожалуйста как это делается.

Answer 1

[Станислав]

Может быть надо чтобы при повторном клике блок вообще не открывался?
Посмотри в сторону этих функций, это из документации скопировано:

function handler() {
  alert('Шла Саша по шоссе');
};
$('#foo').on('click', handler);  // установим обработчик нажатия кнопки мыши на элементе foo
$('#foo').off('click', handler); // удалим обработчик

Ты можешь в свою функцию встроить удаление ожидания события, например так:
$(this).off('click', handler);
Только не забудь обратно навесить событие, когда закроешь свой блок или чего у тебя там, ато повторно не откроется.