Есть код аккордеона. Работает при событии .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