Problema con Jquery, .slideToggle() + .stop()

[Cotelandia]

Buenas! Tengo una duda, yo quiero tener una especie de menu con botones(.boton), al cliquearlos se tiene que desplegar el DIV correspondiente (.desplegar_info) y al darle clic de nuevo a la imagen ocultar el DIV, pero mirando el codigo de Jquery tengo un problema . En el primer botón, si le doy clic dos veces seguidas se traba, a los otros botones que tienen otro codigo con un click no hay problema, pero en caso de que como un boludo te pongas a cliquearlos se abren y cierran una y otra y otra vez, como hago para mejorar el codigo Jquery para que no pase eso?

Por si no entendieron ya que por ahí no me explico del todo bien : Quiero que al cliquear un DIV(.boton) se despliegue el DIV siguiente (.desplegar_info), y al cliquear de nuevo la imagen se esconda la info desplegada. Y que al cliquear varias veces la imagen no termine repitiendose el efecto hasta que cumpla con la cantidad de clics echos


Desde ya muchas gracias. Acá les dejo el HTML, JS y CSS.

Código HTML:

 <div id="menu">
		<div class="boton" id="numero1">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numeroa">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>

		<div class="boton" id="numero2">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numerob">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>

		<div class="boton" id="numero3">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numeroc">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>

		<div class="boton" id="numero4">
			<a href="#"><img src="http://k38.kn3.net/09D0B3675.png"></a>
		</div>
			
		<div class="desplegar_info" id="numerod">
			<p>Bla bla bla</p>
			<p>LBLBLBLBLBLBL</p>
			<p><a href="#">ASDASDASD</a></p>
		</div>
	</div> 

Código HTML:

$(document).ready(function(){

//Ejemplo de la página de Jquery .stop() **Se traba al darle doble clic**

	var $block = $('#numeroa');
	/* Toggle a sliding animation animation */
	$('#numero1').on('click', function() {
	    $block.stop().slideToggle(1000);
	});

//Lo que pude crear xD

	$("#numero2").click(function(e){
	$("#numerob").slideToggle(1000);
	e.preventDefault();
	});

	$("#numero3").click(function(e){
	$("#numeroc").slideToggle(1000);
	e.preventDefault();
	});

	$("#numero4").click(function(e){
	$("#numerod").slideToggle(1000);
	e.preventDefault();
	});

});

Código HTML:

*{margin: 0;padding: 0;}
a{text-decoration: none;color: #000;}
li{list-style: none;}
img{border-style: none;}

body
{
	background: rgb(50,50,50);
	margin: 0 auto;
	text-align: center;
}

#menu
{
	margin: 1em auto;
}

#menu img
{
	width: 20%;
}

.desplegar_info
{
	background: rgb(230,230,230);
	box-shadow: 0 0 .3em .1em rgb(0,0,0) inset;
	display: none;
	margin: 0 auto .4em;
	padding: .3em 0;
	width: 20%;
}

Si por ahí me quieren corregir alguna otra cosa, no me viene mal