Меню слайдер. Замена hover на click

[melst]

Здравствуйте.
Сразу скажу, что я в JavaScript новичок, почти ноль. Учусь верстать страницы.
Вставил вот такой слайдер аккордеон на jQuery http://werg.hol.es/2013/12/%D0%B3%D0...y-%D0%B8-css3/
Подскажите , пожалуйста, как сделать, чтобы раскрытие происходило по клику, а не по наведению (hover)? И как сделать по-умолчанию один блок открытым.

$(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);
        }
    );
});

Этот код понимаю, но...

Заранее спасибо.

[рони]

melst,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[melst]

Прошу прощения, но не получается.

[рони]

melst,
нажать
нажать переместить код

[melst]

melst,
нажать
нажать переместить код

Благодарю. А я в ручную тэги писал и ничего...

[рони]

melst,
ок

$(function() {
                var cur;
                $('#accordion > li').click(
                    function () {
                      if(cur != this){
                        cur && $(cur).click();
                        cur = this;
                        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();
                      }
                    else {
                        cur = null;
                        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);
                    }
                    }
                ).eq(1).click(); // 3  2  1  0  первый блок третий
            });

[melst]

Спасибо. Попробуем разобраться.

[melst]

Здравствуйте, Рони

$(function() {
                var cur;    // создается переменная
                $('#accordion2 > li').click(    // событие - нажатие на блок li
                    function () {
                      if(cur != this){  // не совсем еще понял что есть this (текущий объект или документ??)
                        cur && $(cur).click();  // присваивается состояние будто нажата кнопка мыши?
                        cur = this;
                        var $this = $(this);
                        $this.stop().animate({'width':'330px'},300);  //с этим все ясно
                       
                        $('.bgDescription',$this).stop(true,true).slideDown(300);
                        $('.description',$this).stop(true,true).fadeIn();
                      }
                    else {
                        cur = null;   // удаляется переменная
                        var $this = $(this);
                        $this.stop().animate({'width':'170px'},300);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(700);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                    }
                ).eq(5).click(); // 3  2  1  0  первый блок третий   С эти тоже не разобрался.
            });

Посмотрите, пожалуйста, правильно я хотя бы размышляю в комментариях? Синтаксис, конечно, темный лес для меня))

[рони]

// не совсем еще понял что есть this (текущий объект или документ??)

this это li на который нажали

// присваивается состояние будто нажата кнопка мыши?

если кликнут новый li, то закрыть старый до этого нажатый
.eq(5) выбрать нужный li и открыть click()
в коде html li идут слева на право 0, 1, 2, ... но из-за css их порядок визуально наоборот, именно об этом было уточнение.

// удаляется переменная

именно этим обеспечивается закрытие открытие
проверкой тут

if(cur != this){ // не совсем еще понял что есть this (текущий объект или документ??)

[melst]

this это li на который нажали

если кликнут новый li, то закрыть старый до этого нажатый
.eq(5) выбрать нужный li и открыть click()
в коде html li идут слева на право 0, 1, 2, ... но из-за css их порядок визуально наоборот, именно об этом было уточнение.

именно этим обеспечивается закрытие открытие
проверкой тут

Спасибо за подробное объяснение. Давно уже на форумах не встречал столь отзывчивого человека))