Why is my page refreshing when I click on a certain button?

Question

I have a problem. I have 2 div, which one is hidenn by default. I wrote this code, but when i press on second div button, my page starting refreshing.

Jquery

<script type="text/javascript">

    $('body').on('click', '.actprn', function () {
        $(this).next().slideToggle("slow");
    });

$('body').on('click', '.actscn', function () {
    $(this).next().slideToggle("slow");
});

HTML

 <form>
<div class="infpers">
            <div class="actprn row">
                <div class="col-md-4"> <h2> Main Information</h2></div>
                <div class="col-md-4 col-md-offset-4"><button class="btn btn-default btn-xs" type="submit"> &#8691;</button></div>
            </div>
 <div class="mainId">
    ....
  </div>

   <div class="actscn row">
                <div class="col-md-4"> <h2>Informations secondaires</h2></div>
                <div class="col-md-4 col-md-offset-4"><button class="btn btn-default btn-xs"> &#8691;</button></div>
            </div>
            <div class="formsc" style="display: none;"> 
             ...
            </div>
            </form>

I think it's because style="display: none;" but maybe I miss something else.