了解jQuery父母与子女

Question

I am trying to make sense of jquery and have hit a brick wall. I have a created a drop down show and hide menu function [Click here][1] However i can not get it to work correctly. On the right hand side of the page where you see about, delivery etc. I am trying to create a function where when the user clicks on one of the tabs it hides the tab that has the class .active and add the class the next li . For some reason my script is not working. Does anyone know why?

$('.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

You need to do this -

$('.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/