Метод .toggle() позволяет связать с событием click две и более функций, которые будут поочередно вызываться при последовательном выполнении щелчков. Этот метод может использоваться для попеременного изменения видимости элементов, например путем переключения между методами .show() и .hide(), аналогично тому, как последовательные вызовы метода .slideToggle() обеспечивают поочередный вызов методов .slideUp() и .slideDown().

 
Прежде всего, свяжите с событием щелчка на абзаце с идентификатором bar три различные функции для вывода сообщений, используя следующий код.
$("#bar")
    .toggle(function(){
                console.log("Функция 1");
            },
        function(){
                console.log("Функция 2");
            },
        function(){
                console.log("Функция 3");
            });

  
После выполнения этого кода последовательные щелчки на абзаце с идентификатором bar будут сопровождаться поочередным выводом трех различных сообщений в окне консоли. Далее организуйте переключение видимости абзаца с идентификатором bar с цомощью следующего кода:
$("#bar").toggle();

Запуск этой команды скроет абзац. Повторный ее запуск восстановит видимость абзаца. Если при вызове метода указать длительность анимации в качестве первого аргумента, то сокрытие и восстановление видимости элемента будут происходить в режиме анимации.
$("#bar").toggle(2000);

 
Наконец, передача методу булевого флага позволяет указать, что именно следует сделать: отобразить или скрыть элементы.

$("#bar").toggle(true); // будут отображены все элементы
$("#bar").toggle(false); // будут скрыты все элементы