Hola, quiero hacer exactamente una cosa que he visto en una página, si le dais click en la ciudad arriba en el header, se os despliega un div y cuando le das a Ver más ciudades se agranda el div con un efecto para mostrar más ciudades.
Yo quiero hacer esto en mi página para otros campos, pero bueno la idea que quiero es esa y no sé por dónde empezar a googlear o investigar como hacer eso.
A ver si alguno puede orientarme, gracias.
Google, primera entrada poniendo el título del tema: http://sumolari.com/crea-un-panel-deslizante-con-jquery/
Ese efecto se llama slideToggle de jQuery.
http://api.jquery.com/slideToggle/
display: none;$(document).ready(function(){
$("#id_boton").click(function(){
$("#id_capa").slideToggle();
});
});
Funciona seguro 
Suerte!
Gracias a los dos #2 #3, pero soy el tio más negado de la historia, su puta madre. No lo hago funcionar.
Tengo en el header
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>y
<script>
$(document).ready(function(){
$("#boton").click(function(){
$("#desplegable").slideToggle();
});
});
</script>Después:
<p><a href="#" id="boton">+ Todos los campos</a></p>
<div id="desplegable" style="display: none;"><ul>
<li><a href="#">Campo1</a></li>
<li><a href="#">Campo2</a></li>
<li><a href="#">Campo3</a></li>
<li><a href="#">Campo4</a></li>
<li><a href="#">Campo5</a></li>
<li><a href="#">Campo6</a></li>
<li><a href="#">Campo7</a></li>
<li><a href="#">Campo8</a></li>
<li><a href="#">Campo9</a></li>
<li><a href="#">Campo10</a></li>
<li><a href="#">Campo11</a></li>
<li><a href="#">Campo12</a></li>
<li><a href="#">Campo13</a></li>
<li><a href="#">Campo14</a></li>
<li><a href="#">Campo15</a></li>
<li><a href="#">Campo16</a></li>
</ul></div>Yo creo que así sería, no? Pues cuando le doy al enlace + Todos los campos me lleva a # osea nada xD.
Qué estoy haciendo mal :/ ?
Perdona así mejor, con code
Fíjate si tienes la libreria jquery donde le estais indicando, no obstante yo siempre la llamo desde google,
<script type="text/javascript" src="https:// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Y el display:none; ponlo en el <style></style> del head o el .css externo.
Sí, lo del display está ahí temporalmente en cuanto lo haga funcionar, le pondré estilos a todo bien y demás.
#7 prueba en poner el id boton dentro de otro div es decir;
<p><a href="#"><div id="boton">+ Todos los campos</div></a></p>#8 Joder que rabia me dan estas cosas. He probado con tú último código y llamando al jquery de Google pero nada, al dar al enlace me lleva a #.
#10 Si si lo de google eso lo vi y lo puse bien, lo de quitar el a href no es viable, entonces no hay nada clickeable para llamar a la función. Se queda como un div con texto sin mas.
#9 quítale la etiqueta <a href></a> pues
P.D: si estás usando el enlace a jquery de google que te he puesto, junta el http:// con la dirección que lo he separado para que se vea completo el enlace.
Vale he sacado conclusiones.
Poniendo este código que he sacado de otro lado, me funciona, con el de eXtreM3 no ni idea por qué:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#boton").click(function(){
jQuery("#desplegable").slideToggle("slow");
jQuery(this).toggleClass("minus_icon"); return false;
});
});
</script>Y importante poniendo la librería por debajo de los otros js que tengo en el header.
<script type="text/javascript" src="js/jquery.easyselect.js"></script>
<script type="text/javascript" src="js/jquery.transpose.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>Es decir así. Si pongo la libreria por encima de alguno de esos no funciona. Si pongo sólo la librería y quito todos esos funciona. O sea que esos otros js hacen que no rule bien como debería.
No sé si me he explicado... esto es muy raro.
Pero que se repita da igual no? Yo al final mismamente la función la puse dos veces para hacerlo dos veces y rula bien. Ya digo que hablo desde la ignorancia porque no estoy muy puesto en esto.
Banead a este personaje por favor, ya no se molestan en hacer spam bien, me copia el mensaje directamente el subnormal xD
#1 con tu código debe funcionar si en la función que hace click , le añades el parámetro "e" por ejemplo, ya que jQuery te pasa el evento generado (click).
La primera línea de esa función debe hacer un e.preventDefault() , lo que hace es prevenir el comportamiento por defecto del elemento pulsado, que al ser un a (anchor) su comportamiento por defecto es ir al enlace o ancla establecido en el atributo href. De esta forma consigues que ese a se comporte como un button o input button o span como dice #11