aparecer y esconder un div con el mismo enlaze

[shake2427]

hola

estoy haciendo lo siguiente cuando doy click en un enlaze aparece un un div con otra informacion,pero quiero que cuando le vuelva a dar click en el mismo enlaze se vuelva a esconder el div.el codigo que tengo es el siguiente.

Código Javascript:

$(document).ready(function(){
            //al hacer click en mostrar:
            $('#escojerciudad').click(function(evento){
                evento.preventDefault()
                $('#ciudades:hidden').slideDown();              
            });
            
 });
 

Código HTML:

<table cellpadding="0" cellspacing="0" border="1" width="1024" align="center">
	<tr>
    	<td>
<table cellpadding="0" cellspacing="0" width="1024" border="0">
    <tr>
    	<td>
        <div id="ciudades" style="display:none">
       ciudades
       </div>
        </td>
    </tr>
    	<tr>
        	<td>
            <div id="header">
            header
            <a href="#" id="escojerciudad">escojerciudad</a>
            </div>
            </td>
        </tr>
        	<tr>
            	<td>
                info
                </td>
            </tr>
</table>    
        
        </td>
    </tr>
</table> 

les agradeceria se me pueden ayudar.

asi como en la pagina del groupon [URL="http://www.groupon.com.co/deals/cali"]http://www.groupon.com.co/deals/cali[/URL]