Jquery click function effect

Question

I have a jquery code, but I'm a little bit confused on how can I put a css on this:

$(document).ready(function () {
    $('span.account-menu').click(function () {
    $('ul.menu').slideToggle('medium');
    });
});

I wanted to add this css in the click function.

border: 1px solid #999999;
background-color: #333333;

This style, I wanted to effect only in 'span.account-menu' and not affecting ul.menu. I try the code that you have given but the problem is when I click back the menu the style will not disappear.

Answer 1

Using the .css() method.

http://api.jquery.com/css/

Answer 2

You can either

• add those css attributes manually by using .css()
• add a css class by using .addClass()

Example

$(document).ready(function () {
   $('span.account-menu').click(function () {
      $('ul.menu').slideToggle('medium', function(){
         $(this).css({
            border:           '1px solid #999999',
            backgroundColor:  '#333333'
         });
      });
   });
});

Answer 3

Just do something like:

$('ul.menu').slideToggle('medium').css({'border': '1px solid #999999',
                                        'background-color': '#333333'});