Show text with the jQuery slideToggle function

JavaScript
1

I work on a website and the client wants jQuery on the menu. When a user clicks on “webdesign” link menu a shadow goes down with some text on it(you can try it).
Right now when I click on that webdesign menu link, the other one “ipone apps” goes down too, but the owner doesn’t like this. He likes that shadow, but he doesn’t want to see that other menu link to be moved when he clicks on other menu link.

This is the jQuery that I used:


//when the DOM is ready 
$(document).ready(function() {
  //store in a variable the second paragraph
  var $set1 = $('.menu-item');
  //use hide() method to hide it
  $set1.hide();
  
  
  //when you click on more link
  $('a.more1').click(function() {
	//show the second paragraph
	//using slideToogle() method
	//slow=6sec normal=4sec fast=2sec
    $set1.slideToggle('slow');
	
  //keep the link from activating 
  //its default action
  return false;
							 
  });
  
});

Can someone give a hand with this?

2

Thank you for the outline :).
I put position absolute for iphone apps image but I got the same problem.

3

My mistake ScallioXTX. Now works with position absolute. Thank you.

4

The solution is not in the JavaScript but in the CSS.
The ipod apps link has a position relative to the webdesign link. Therefore if the webdesign link gets bigger the ipod apps link goes down.

My solution would be to give #wrapper position relative, and then give all (or at least the bottom two) buttons position absolute. That way they’re not influencing each other.

PS. I’d also put outline:none on the <a> tags. I get a dotted border around a button when I click it, doesn’t look verry pretty :slight_smile: