расширяемый список расширяется только после второго нажмите

Question

Вот FIDDLE

У меня есть список, но не расширяется на первый щелчок. И затем при втором щелчке он расширяется и сворачивается за один ход. не может понять, почему ...

Вот надрез в JQuery битого

$(".expandListHeader").click(function() { 
    $header = $(this); 
    $content = $header.next(); 
    $content.slideToggle(200, function() { 
     $('.contentCol', this).fadeToggle(400); 
    }); 
}); 

Вот еще один список, в котором он сделал работу, но Ive изменил классы. (возможно, использовать этот).
Они одинаковы во всех отношениях (99,9% уверены), за исключением названий классов.
FIDDLE

Answer 1

Я сделал скрипку и обновил свой код.

Link to Fiddle

.toggle() 

Показалось работать. А также имеет приятный эффект без перекос.

Answer 2

Ive добавили style="display:none" раздел expandListContent, и она работала.

FIDDLE

 <div class="expandListHeader"> 
      <div class="Collapse"> 
       <div class="expandListHeaderRow">A</div> 
      </div> 
     </div> 
     <div class="expandListContent" style="display:none"> <--- HERE 
      <div class="expandListContentRow contentCol"> 
       <div class="expandListItem">Abraham</div> 
       <div class="expandListItem">Albert</div> 
       <div class="expandListItem">Amber</div> 
       <div class="expandListItem">Andrew</div> 
       <div class="expandListItem">Arnold</div> 
       <div class="expandListItem">Astrix</div> 
       <div class="expandListItem">Athur</div> 
      </div> 
     </div> 

Answer 3

Попробуйте добавить стиль -

.expandListContent { 
display: none 
}