Помогите сменить событие .hover на .click
 

Есть код аккордеона. Работает при событии .hover. Но мне надо, чтобы работал по клику. Клик — открылось, ещё раз клик — закрылось.

Исходный код:

<script type="text/javascript">
            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
        </script>

Я пытался прописать событие .click, но оно работает только на открытие. Второй клик не работает, и, как результат, аккордеон не закрывается:

<script type="text/javascript">
            $(function() {
                $('#accordion > li').click(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        $('#accordion > li').click(
					 function(){
						var $this = $(this);
						 $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
					 });
                    }
                );
            });
        </script>

Помогите добавить второй клик, пожалуйста.

Ссылка на исходник (на всякий случай):
http://tympanus.net/Tutorials/Elegan...tAccordion.zip

Попробуйте так:

<script type="text/javascript">
            $(function() {
                $('#accordion > li').click(
                    function () {
						var $this = $(this);
						if($this.css("width")=="115px"){
							$this.stop().animate({'width':'480px'},500);
							$('.heading',$this).stop(true,true).fadeOut();
							$('.bgDescription',$this).stop(true,true).slideDown(500);
							$('.description',$this).stop(true,true).fadeIn();
						}else{
							$this.stop().animate({'width':'115px'},1000);
							$('.heading',$this).stop(true,true).fadeIn();
							$('.description',$this).stop(true,true).fadeOut(500);
							$('.bgDescription',$this).stop(true,true).slideUp(700);
						}
                    }
                );
            });
        </script>

Спасибо. Решил проблему через toggle:

<script type="text/javascript">
            $(function() {
                $('#accordion > li').toggle(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
        </script>