понимание родителя и детей jQuery

Question

Я пытаюсь понять jquery и ударил кирпичную стену. У меня есть раскрывающееся шоу и скрытие функции меню [Нажмите здесь] [1] Однако я не могу заставить его работать правильно. В правой части страницы, где вы видите, доставку и т. Д. Я пытаюсь создать функцию, когда пользователь нажимает на одну из вкладок, которая скрывает вкладку с классом .active и добавляет класс следующий li. По какой-то причине мой скрипт не работает. Кто-нибудь знает, почему?

$('.hidden-bits').removeClass('active'); 
    $('.hidden-bits').eq(0).addClass('active'); 

    $('.accordin-link').click(function(){ 
     var $this = $(this); 
     $('.hidden-bits').slideUp().removeClass('active'); 
     $this.parent()('.hidden-bits').slideDown().addClass('active'); 
    }); 

HTML

<ul id="product-info"> 
    <li> 
     <span> 
      <a class="accordin-link" href="#">about</a> 
     </span> 
      <ul class="hidden-bits"> 
      <li> 
       <div class="tab"> 
        <div class="productDesc"> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua. 
        </div> 
       </div> 
      </li> 
     </ul> 
    </li> 

.hidden-bits{ 
    display: none; 
} 

.active{ 
    display: block; 
} 

Answer 1

Вы должны сделать это - (». Скрытые бит)

$('.accordin-link').click(function(){ 
    var $this = $(this); 
    $('.hidden-bits').slideUp().removeClass('active'); 
    $this.parent().next('.hidden-bits').slideDown().addClass('active'); 
}); 

Demo --->http://jsfiddle.net/HhMjn/