[jQuery] One button to do two opposite tasks.

[Cristian]

HI,
I'm using the code below to create a hover effect. When the user puts
the mouse over a div "box1" a list of items appear, and when it goes
out, the list disappears.
I thought it would be interesting to change the hover event for a
click event. So that when the user clicked the box for the first time
the list would appear, and the second click would make it disappear.

Could you guys help me?

$(document).ready(function() {
        $("#box1").click(function() {
                $(".ul-list").css("display", "block");
        },function() {
                $(".ul-list").css("display", "none");
        });
});