jQuery переключает контент-div из меню

Question

У меня проблемы с получением jQuery, чтобы позволить видеть только один контент-DIV одновременно. Так что при нажатии между кнопками меню (о, рассылка, контакт) это позволит увидеть только один контент-DIV.

--- Затем контент-DIV должен скрываться при нажатии соответствующей кнопки меню (как это происходит в настоящее время).

--- При нажатии на заголовок «alliteration» все открытые DIV-файлы контента должны быть скрыты.

 $('#collapse_about').hide();
 $('#collapse_newsletter').hide();
 $('#collapse_contact').hide();

 $('#menu1').click(function() {
  $('#collapse_about').slideToggle(400);
   return false;
  });

 $('#menu2').click(function() {
  $('#collapse_newsletter').slideToggle(400);
   return false;
  });

 $('#menu3').click(function() {
  $('#collapse_contact').slideToggle(400);
   return false;
  });

Я понимаю, что это довольно простой фрагмент кода ... но форма его уклоняется от меня. Любая помощь очень ценится.

Answer 1

В верхней части головы я назначил бы все меню одного и того же класса, например class1.Затем сделайте div slideUp, который имеет функцию обратного вызова.Когда слайд закончен, он скользит вниз по правильной панели.

  $('#menu1').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_about').slideDown(400);
   });
  });

 $('#menu2').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_newsletter').slideDown(400);
   });
  });

 $('#menu3').click(function() {
$(".class1").slideUp(function() {
  $('#collapse_contact').slideDown(400);
   });
  });

Редактировать: Это начало, но не совсем так, как вы просите :(Вот демо на jsfiddle: здесь