Mudar DIV com Javascript

Prezados,

estou com um probleminha...

Tenho um Checkbox que ao ser marcado ele apresenta uma div e ao desmarcar ele apresenta uma outra div.

Está funcionando até que bem, porém só funciona após o 3º click. ?!?!?!

Alguém sabe como resolver isso?

	E uma outra dúvida, essas funções não funcionam se estiver utilizando uma class no checkbox? Ex: <input type="checkbox" name="mp_sj" id="mp_sj" onclick="mostrar(this)"  **class="js-switch"**>

	 

<script>

	function mostrar(){
 $("#mp_sj").click(function(e) {
 if ($(this).is(':checked')) { //Retornar true ou false
 $('.minhaDiv1').show();
 $('.minhaDiv2').hide();
 }
 else {
 $('.minhaDiv1').hide();
 $('.minhaDiv2').show();
 }
 });
	};
	</script>

<style>
 .minhaDiv1{display:none;}
 .minhaDiv2{display:block;}
</style>

<input type="checkbox" name="mp_sj" id="mp_sj" onclick="mostrar(this)"/>
<div class="minhaDiv1">
	OK1
</div>
<div class="minhaDiv2">
	OK2
</div>

	Agradeço desde já a atenção de todos!