Так работает но, почему-то не возвращает правую колонку...
Попробовал вот так ещё:

$('#vegOn').click(function () {
        $f = $(".fish").parent().parent().detach();
        $m = $('.meat').detach();
        $('.hamburger').replaceWith('<li class="portobello"><em>Portobello Mushroom</em></li>');
        $('.meat').after('<li class="tofu"><em>Tofu</em></li>');
        $('.tofu').parent().parent().addClass('veg_leaf');
    });

    $('#restorMe').click(function () {
        $('.menu_entrees li').first().before($f);
        $('.portobello').replaceWith('<li class="hamburger">hamburger</li>');
        $('.tofu').each(function (i) {
            $(this).after($m[i]);
        });
        $('.tofu').remove();
    });

Но так та же фигня и при нажатии дважды на одну кнопку наченает возвращать только гамбургер/гриб :(

drakulawz,
пост №10 смотрели?

рони,
так работает, но не возвращает правую колонку. :(
Вот так попробовал:

$('#vegOn').click(function () {
        $f = $(".fish").parent().parent().detach();
        $m = $('.meat').detach();
        $('.hamburger').replaceWith('<li class="portobello"><em>Portobello Mushroom</em></li>');
        $('.meat').after('<li class="tofu"><em>Tofu</em></li>');
        $('.tofu').parent().parent().addClass('veg_leaf');
    });

    $('#restorMe').click(function () {
        $('.menu_entrees li').first().before($f);
        $('.portobello').replaceWith('<li class="hamburger">hamburger</li>');
        $('.tofu').each(function (i) {
            $(this).after($m[i]);
        });
        $('.tofu').remove();
    });

Та же фигня но ещё и после нажатия дважды на любую кнопку начинает менять только гамбургер/грибы...
Судя по всему, массивы $f, $m невидимы для второй функции 'click'. Как бы их так объявить, что бы они сразу не применялись и были доступны для обеих функций?

P.S.: Я бы уже давно скачал исходный код с сайта учебника, но того сайта уже нету - учебник 2012 года.
Наверное стоит идти на следующий шаг обучения. Может потом разберусь что к чему.

не осилил