Question

I’m having trouble getting jQuery to allow only one content-DIV to be visible at a time. So that clicking between the menu buttons (about, newsletter, contact) this will allow only one content-DIV to be visible.

— Then the content-DIV needs to hide when the associated menu button is clicked (like it does currently).

— Upon clicking the header ‘alliteration’, any content-DIVs that are open need to hide.

 $('#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;
  });

I understand that this is a pretty simple bit of code… but the form of it evades me. Any help is much appreciated.

Answer 1

Off the top of my head I would assign all of the menus the same class such as class1. Then make the div slideUp which has a callback function. When the slideUp is finished it will slide down the correct panel.

  $('#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);
   });
  });

Edit: This is a start but doesn’t entirely do as you are asking:(
Here is the demo on jsfiddle: here