Jquery Slide - переключение каждой функции (открыто / закрыто)

Question

У меня есть следующий кусок jquery.Что по сути является слайдером контента, когда я нажимаю на ссылку с идентификатором slick-toggle1, она скользит вниз по соответствующему контенту slickbox1.То же самое с slick-toggle2 --> slickbox2 etcetc.

$('a.clickdown').each(function() {
      var $this = $(this);
      var index = $this.attr('id').match(/(\d+)$/, '');
      var number = parseInt(index[1]);
      $this.click(function() {
          $('#slickbox' + number).slideToggle(400);
          $this.toggleClass('opened').blur();
         return false;
     });
}); 

В данный момент, когда я нажимаю на отдельные ссылки, соответствующие области будут складываться.Однако, чего я хочу достичь, так это: когда я нажимаю «slick-toggle2», он отображает slickbox2, но скрывает остальные (так slickbox1 & slickbox3).

Answer 1

Добавьте вызов к родительскому элементу #slickbox (давайте назовем его slick_parent) и slideUp всем дочерним div, а затем сдвиньте вниз нужное поле:

$this.click(function() {
    $('#slick_parent > div').slideUp();
    $('#slickbox' + number).slideToggle(400);
    $this.toggleClass('opened').blur();
    return false;
});

Answer 2

Я думаю, что вы ищете jquery гармошку : http://docs.jquery.com/UI/Accordion.Этот плагин JQuery делает это автоматически.Слайды тот, который вы нажимаете открыть.И закрывает остальное.

Answer 3

Попробуйте это, чтобы найти все элементы, идентификаторы которых начинаются с slickbox, и сдвинуть их вверх.

$('a.clickdown').each(function() {
    var $this = $(this);
    var index = $this.attr('id').match(/(\d+)$/, '');
    var number = parseInt(index[1]);
    $this.click(function() {
        $('[id^=slickbox]').slideUp(); // This does the magic.
        $('#slickbox' + number).stop(true, true).slideToggle(400);
        $this.toggleClass('opened').blur();
        return false;
    });
});

Answer 4

Добавьте класс hidable к каждой ссылке, которую хотите скрыть, например, <a class="clickdown hidable">, затем в функции щелчка сделайте $(".hidable").hide();