How can I add on Toggle Button Javascript slideup/slidedown?

Hello,
How can I add on Toggle Button Javascript slideup/slidedown functions on this javascript and change a little bit the mainhead 's bar color to looks collapsed on collapsed category?

Code:

$(function(){$(".main .main-head").prepend('<span class="collapse" style="padding: 0px; float:right;width: 28px;height: 17px;overflow: hidden;cursor:pointer;"><img src="http://i73.servimg.com/u/f73/17/06/15/51/cat_mi11.png" alt="Close" /><img class="hide" src="http://i73.servimg.com/u/f73/17/06/15/51/cat_ma11.png" alt="Open" /></span>');$(".collapse").each(function(a){$(this).attr("id","collapse"+location.pathname+a);if(my_getcookie("collapse"+location.pathname+a)=="2"){$(this).children("img[alt='Close']").hide();$(this).children("img[alt='Open']").show();$(this).parent().next().hide()}});$(".collapse img[alt='Close']").click(function(){my_setcookie($(this).parent().attr("id"),1,2,0);$(this).hide().next().show();$(this).parent().parent().next().hide()});$(".collapse img[alt='Open']").click(function(){my_setcookie($(this).parent().attr("id"),0,2,0);$(this).hide().prev().show();$(this).parent().parent().next().show()})});

Bump

I'm not sure what you mean about the mainhead color, but you can change your script to the one below for the slide effect.

Code:

$(function(){
  $(".main .main-head").prepend('<span class="collapse" style="padding: 0px; float:right;width: 28px;height: 17px;overflow: hidden;cursor:pointer;"><img src="http://i73.servimg.com/u/f73/17/06/15/51/cat_mi11.png" alt="Close" /><img class="hide" src="http://i73.servimg.com/u/f73/17/06/15/51/cat_ma11.png" alt="Open" /></span>');
  $(".collapse").each(function(a){
    $(this).attr("id","collapse"+location.pathname+a);
    if(my_getcookie("collapse"+location.pathname+a)=="2"){
      $(this).children("img[alt='Close']").hide();
      $(this).children("img[alt='Open']").show();
      $(this).parent().next().hide()
    }
  });

  $(".collapse img[alt='Close']").click(function(){
    my_setcookie($(this).parent().attr("id"),1,2,0);
    $(this).hide().next().show();
    $(this).parent().parent().next().slideUp()
  });

  $(".collapse img[alt='Open']").click(function(){
    my_setcookie($(this).parent().attr("id"),0,2,0);
    $(this).hide().prev().show();
    $(this).parent().parent().next().slideDown()
  });
});

Basically you change hide() into slideUp() and show() into slideDown()

Thank you very much @An I setup and the slideup/slidedown functions it working perfectly the only problem is that not changes the opacity of the collapsed category 's header (main-head) keeps the original colors.

Bump

So you want it to become a different color when it's hidden? Find the two event handlers below.

Code:

  $(".collapse img[alt='Close']").click(function(){
    my_setcookie($(this).parent().attr("id"),1,2,0);
    $(this).hide().next().show();
    $(this).parent().parent().next().slideUp()
  });
 
  $(".collapse img[alt='Open']").click(function(){
    my_setcookie($(this).parent().attr("id"),0,2,0);
    $(this).hide().prev().show();
    $(this).parent().parent().next().slideDown()
  });

Inside the first event handler (which is for [alt='Close']) add the statement below. It can be after or before any of the existing statements (e.g. $(this).hide().next().show()), execution order doesn't matter too much here.

Code:

$(this).closest('.main-head').addClass('category_hidden');

The above statement will add a class to the mainhead when it's hidden. To remove the class when it's visible add the statement below to the second event handler. (the one for [alt='Open'])

Code:

$(this).closest('.main-head').removeClass('category_hidden');

As you guessed, this one will remove the class. All you need to do afterwards is define a style in CSS for the class.

Code:

.category_hidden {
  /* style properties */
}

Hello @An,
Thank you very much, it is solved