Свернуть allready развернуть div

Question

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

JQuery:

$(document).ready(function(){ 
$(".employee").click(function() { 
    $(".employeeInfo").hide(); 
if ($(this).children(".employeeInfo").css('display') == 'none') {   
    $(this).children(".employeeInfo").show(); 
} else {  
     $(this).children(".employeeInfo").hide(); 
} });}) 

HTML:

<div class="employee">name 
<div class="employeeInfo">info etc.</div></div> 

<div class="employee">name 
<div class="employeeInfo">info etc.</div> 

CSS:

div { 
width: 400px; 
margin-bottom: 20px; 
margin-left: 5px; 
cursor: pointer; } 

div.employee{ 
background: #ccc; } 

div.employeeInfo { 
margin-left: 5px; 
display: none; } 

Я думаю, что проблема в этой строке:

if ($(this).children(".employeeInfo").css('display') == 'none') { 

Answer 1

Попробуйте

$(".employee").click(function() { 
    $(this).children(".employeeInfo").toggle(); 
}); 

http://api.jquery.com/toggle/