Form submitting when clicking button that invokes javascript function to hide inputs

Question

The following code sample represents my problem which is, briefly, that when I click the button and execute togglehider(), the elements in the div do indeed collapse, but then the form is submitted as though I had clicked on the submit input! Can someone tell me why this is, and the remedy? Thank you.

@model TUTCSkeleton.ViewModels.CycleEventViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>CycleEvent</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <div class="form-group">
        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
        </div>
    </div>

    @if (Model.CanManage)
    {
        <button onclick="togglehider()">Audit Data Visibility</button>
        <div id="togglehide">

            <div class="form-group">
                @Html.LabelFor(model => model.Modified, htmlAttributes: new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Modified, new {htmlAttributes = new {@readonly = "readonly", @class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.Modified, "", new {@class = "text-danger"})
                </div>
            </div>
        </div>
    }

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <script type="text/javascript">
        function togglehider() {
            var x = document.getElementById("togglehide");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
}