jQuery Toggle Animation When you click open - a div slides out. If you click on the new div, an additional div slides out from under it. This is working great, but I need two things that I cant figure out!


How can I condense the jQuery so I don't have to add a class to it every time I want a new slider? Is it possible to do a .sibling kind of thing, or something like this?
I've tried making a close button, but I cannot get it to work the way I want. When you click close, I want the bottom div to close first, then the slide out div to close. And this button would need to work even if only one div is open.


jsFiddle

$(document).ready(function() {
   $('.cambridge').hide();  
   $("#test").click(function () {
      $(".cambridge").toggle("slide", { direction: "right" }, 1000);
   });
   $('.shopping').hide();  
   $("#test2").click(function () {
      $(".shopping").toggle("slide", { direction: "up" }, 1000);
   });
});
A quick review:

JSHint.com


Your code passes all checks, well done


Naming


test and test2 are unfortunate names for elements, I am sure you can come up with something better


Counter Proposal

Looking at the code, there is definitely repetition in making those sliders, you can extract what is common in to a function, and then use that function for any future sliders:

(This is blatantly stolen/modified from the deleted answer):

$(document).ready(function() {

   function registerSlider( buttonId, sliderClass, direction){
     $(sliderClass).hide();  
     $(buttonId).click(function () {
       $(sliderClass).toggle("slide", { direction: direction }, 1000);
     });
   }   
   registerSlider("#test", '.cambridge', 'right' );
   registerSlider("#test2", '.shopping', 'up' );

});


Your questions


I showed in my counter proposal how you can condense the code, but I do believe you will need each time a distinct class
Finding the answer to that question is not trivial (we would need a working sample), and not something codereview does.