I see other tutorials about this topic on this website, but this one is different from all the other ones.

I found this tutorial called "Adding a bounce to a slide down". Here is the [link](http://www.sitepoint.com/forums/showthread.php?1029057-Adding-a-bounce-to-a-slide-down&s=441058924a188f1997333bd3ec050b04&p=5390839&viewfull=1#post5390839) for it.

I have put everything how it's supposed to be, just like in that tutorial, but I do not want two buttons representing close and open, I just want a button with an image, like an arrow. Then when you click the arrow, it will slideDown with the information and that kinda stuff and then, when you click the arrow again, it will slideUp and it will hide the information.

That tutorial could do that, but it has two ID'S representing the close button and the open button and I do not want that.

Here is the JS code for that tutorial and there is more, but this is where it get's the affects and stuff like that.

```
$(document).ready(function() {
    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow", "easeOutBounce");
    });          
    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow");  
    });    

    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });  
});    

```

Do you see #open and #close? that represents two ID'S for the toggle buttons.

I really want to know how to delete the close and the close will represent the open so, when you click the open it will open and when you click the open again, it will close it self without another ID for it.

I have been trying to figure this out, but couldn't figure it out.

Please tell me, what do I gotta do to achieved this.