Basic questions

I'm new to Jquery and this forum.Anyway, im trying to understand it and I've got a couple of questions. With the following code I'm trying to create a button to show categores (an unordered list) and when the user has pressed the button and the categories are showed, I would like to display the "hide categories" div instead. Obviously, this works. But what doesnt work is hiding the categories once they are shown. Why is that?
#categories and #hideCategories have "display: none;" attached to them

So,
#showCategores = div
#categores = the list containing the categories
#hideCategories = div

$("#showCategories").click(function()
{
$("#categories").fadeIn("slow");
$("#hideCategories").fadeIn("slow");
$("#showCategories").fadeOut("slow");
});
$("#hideCategories").click(function()
{
$("#categories").hide("slow");
$("#showCategories").fadeIn("slow");
$("#hideCategories").fadeOut("slow");
});

And another one, sometimes I try changing the ID of the pressed button so that I can attach another click event to it once its been clicked, that doesn't work for me either (in this case, the html div with the id "#hideCategories" is gone:

$("#showCategories").click(function()
{
$("#categories").fadeIn("slow");
$("#showCategories").attr("id", "hideCategories");

});
$("#hideCategories").click(function()
{
$("#categories").hide("slow");
$("#hideCategories").attr("id", "showCategories");
});

I might be missing something basic here. Any ideas? Or maybe suggestions on how to improve code quality?

• Topic Participants

• sophie.wikstrom