Mostrar divs

mostra conteudo de div ao clicar em um botao dentro da div pai

HTML

<div class="box-regras">
		<span><b>Invasão</b></span> <br>
		<a class="btn" onclick="mostrarregras(this);">Punição</a>
		<div class="regras" style="display:none">Essa uma regra, coloque tudo que deve aparecer aqui dentro</div>
	</div>
  
<div class="box-regras">
		<span><b>Invasão</b></span> <br>
		<a class="btn" onclick="mostrarregras(this);">Punição</a>
		<div class="regras" style="display:none">Essa uma regra, coloque tudo que deve aparecer aqui dentro</div>
	</div>
	<hr>

	<div class="box-regras">
		<span><b>Roubo na venda de VIP</b></span> <br>
		<a class="btn" onclick="mostrarregras(this);">Punição</a>
		<div class="regras" style="display:none">Essa outra regra, coloque tudo que deve aparecer aqui dentro</div>
	</div>

CSS

.btn{
		padding:3px;
		background:red;
		border-radius:3px;
		cursor:pointer;
		margin-top:5px;
	}

JavaScript

function mostrarregras(E){
    $(E).parent('.box-regras').find('.regras').toggle(400);
}