Мой код jQuery не работает

Question

Я хочу переключить так много div с этим кодом. Один div открывается один раз, но я не знаю, почему это не работает ..

HTML:

<a href="#" id="test" class="bitcon"></a> 
<div class="hide-show"></div> 

JQuery:

var test = $('#test'), 
    a = $('div').find('a'); 

console.log(a.hasClass('active')); 

test.click(function(e) { 
    e.preventDefault(); 
    var $this = $(this), 
     speed = 500; 
    if ($this.hasClass('active') === true) { 
     $this.removeClass('active').next('.hide-show').slideUp(speed); 
    } else if (a.hasClass('active') === false) { 
     $this.addClass('active').next('.hide-show').slideDown(speed); 
    } else { 
     a.removeClass('active').next('.hide-show').slideUp(speed); 
     $this.addClass('active').next('.hide-show').delay(speed).slideDown(speed); 
    } 
}); 

CSS:

.hide-show { 
    display:none; 
} 

Answer 1

Не совершенно уверен, что вы просите, но я думаю это то, что вы е ищет:

var test = $('#test'), 
    a = $('a'); 

a.click(function(e) { 
    e.preventDefault(); 
    var $this = $(this), 
     speed = 500; 
    $this.next('.hide-show').slideToggle(speed); 
}); 

Answer 2

http://jsfiddle.net/jkgmdmvs/2/

HTML:

<div id="divWrapper"> 
    <a href="#" class="bitcon">header 1</a> 
    <div class="hide-show"> 
     <h3>div#1 content</h3> 
    </div> 
    <hr /> 
    <a href="#" class="bitcon">header 2</a> 
    <div class="hide-show"> 
     <h3>div#2 content</h3> 
    </div> 
    <hr /> 
    <a href="#" class="bitcon">header 3</a> 
    <div class="hide-show"> 
     <h3>div#3 content</h3> 
    </div> 
</div> 

JS:

$(document).ready(function(){ 

    $('.bitcon').click(function(){ 
     $('.hide-show').hide(); 
     $('.bitcon').removeClass('active-header'); 
     var anchElement=$(this); 
     var divElement= anchElement.next(); 
     divElement.slideToggle(); 
     anchElement.addClass('active-header'); 
    }); 

}); 

CSS:

.hide-show { 
    display:none; 
} 
.active-header{ 
    background-color:yellow; 
}