Labeling single links/Slide In Slide Out Command

Labeling single links/Slide In Slide Out Command

Hi i am currently coding my new website and i am fairly new to code but want to use code over Photoshop slicing etc as its the way forward coding that is. 

So I am trying to make a box slide in and slide out when a certain link has been clicked, Ive made it work with all 'a' tags but i want to be able to make it work with only one link for one box and another link for another box. (Trying to make a basic drop down box with text in). 

Similar to  http://www.justinmaller.com/showcase.html (If you click about/contact links it will bring the drop down box down and if you click it again it will slide up.

I am also having trouble with the sliding in and our with the following code

  1. $(function() {
  3. $('a') .click(function() {
  4. $('#box').slideDown(500);
  6. $('a') .click(function() {
  7. $('#box').slideUp(500);
  9. });
  11. });
  12. });

I can make it work once where it will slide down and stay their until it is clicked again and it will slide back up but once Ive used the function once on the website it wont work again until i refresh the page. The box will simply slide down and then slide back up.

So 
Q1: Is their a way of labeling each individual link which i can associate with a function like above.
Q2: How can i make the function above work multiple times without the box simply sliding up and down and not allowing the viewer to see the box long enough to read.

Thanks for your help!

    • Topic Participants

    • ben