Question

I have created a small function that I’m using with the onclick event…

I basically use it to close the accordion.

Here is the function:

<script type="text/javascript">
function closeAccordion() {
    $('.content').hide();           
}
</script>

The above works but it’s not smooth … it just hides the content.

How can I do the same thing but adding the closing effect too?

Answer 1

Since you’re collapsing the accordion, I’m unsure of why you’d want to hide the content in the first place since it’s not going to be visible once it’s collapsed.

However in answer to your question, according to their documentation, there’s a change event you can bind a function to when you create the accordion initially:

$(".selector").accordion({
   change: function(event, ui) { ... }
});

Replace that change function with a call to your closeAccordion function.