Seleccionar solo la div donde se hace clic

Hola amigos, tengo 4 elementos div y quiero que al hacer clic en una de ellas las demas desaparezcan y solo quede en pantalla la que se selecciona con el clic.

Dejo código:

<style>
	.opcion {
		padding: 10px;
		color: #fff;
		max-width: 200px;
		margin:5px;
	}
	.verde {
		background-color: #20CE1B;
	}
	.rojo {
		background-color: #CE1B1B;
	}
	.azul {
		background-color: #1B65CE;
	}
</style>

<div class="opcion verde">Verde</div>
<div class="opcion rojo">Rojo</div>
<div class="opcion azul">Azul</div>

Gracias..

Hola terminator. Aquí te he hecho un script que hace lo que pides. Para ello necesitarás incorporar la librería de jquery en tu archivo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

El script es el siguiente:

<script>
	var optionDiv = $(".opcion");

	optionDiv.click(function() {
		optionDiv.addClass("hide");
		$(this).removeClass("hide");
	});
</script>

Te explico lo que hace:
optionDiv hace referencia al div de clase opcion. Entonces, al hacer click en un div que contenga esa clase les aplicará la clase hide (esconder), para aplicarle un display:none. Pero, al objeto que fue clickeado le removerá esa clase hide para que se muestre ese. Dime que tal te va con eso.

Agrega a tus estilos la clase hide

.hide {
	display: none;
}

Hasta la vista, baby.

también puedes hacer algo así:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
	.opcion {
		padding: 10px;
		color: #fff;
		max-width: 200px;
		margin:5px;
		cursor: pointer;
	}
	.verde {
		background-color: #20CE1B;
	}
	.rojo {
		background-color: #CE1B1B;
	}
	.azul {
		background-color: #1B65CE;
	}
</style>

<div class="opcion verde">Verde</div>
<div class="opcion rojo">Rojo</div>
<div class="opcion azul">Azul</div>

<script>
	$('.opcion').click(function() {
		$('.opcion').hide();
		$(this).show();
	});
</script>

Demo https://jsfiddle.net/fm6grthn/