скрыть/показать DIV без отправки формы с помощью JavaScript

Question

это код

 <div id="divFirst"> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"><i class="fa fa-h-square "></i></span> 
         @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Name" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Name, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic-addon1"> <i class="fa fa-map-marker "></i></span> 
         @Html.TextBoxFor(m => m.Address, new { @class = "form-control", placeholder = "Address" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Address, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group "> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1"><i class="fa fa-phone"></i> </span> 
         @Html.TextBoxFor(m => m.Contact, new { @class = "form-control", placeholder = "Contact" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Contact, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1"><i class="fa fa-calendar"></i> </span> 
         @Html.TextBoxFor(m => m.Established, new { @class = "form-control", placeholder = "Year of Establishment" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Established, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group "> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1"><i class="fa fa-envelope"></i></span> 
         @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "Email" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1"><i class="fa fa-globe"></i></span> 
         @Html.TextBoxFor(m => m.Websites, new { @class = "form-control", placeholder = "Websites" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Websites, null, new { @class = "text-danger" }) 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1"><i class="fa fa-registered"></i></span> 
         @Html.TextBoxFor(m => m.Registration_NO, new { @class = "form-control", placeholder = "Registration Number" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.Registration_NO, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1">V</span> 
         @Html.TextBoxFor(m => m.PAN_VAT_NO, new { @class = "form-control", placeholder = "PAN/VAT Number" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.PAN_VAT_NO, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1">C</span> 
         @Html.TextBoxFor(m => m.HospitalCapacity, new { @class = "form-control", placeholder = "Hospital Capacity" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.HospitalCapacity, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1">D</span> 
         @Html.TextBoxFor(m => m.DepartmentCapacity, new { @class = "form-control", placeholder = "Department Capacity" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.DepartmentCapacity, null, new { @class = "text-danger" }) 
       </div> 
       <div class="form-group"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="basic_addon1">S</span> 
         @Html.TextBoxFor(m => m.SuperSpeciality, new { @class = "form-control", placeholder = "Super Speciality (If Any)" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.SuperSpeciality, null, new { @class = "text-danger" }) 
       </div> 

      </div>    
     </div>    
     <button id="createHospitalContinuebtn" onclick="showHide()" class="fa fa-angle-right btn btn-default">Continue</button> 
     <div id="divSecond">    
      <div class="form-group"> 
       <div class="input-group"> 
        @Html.TextAreaFor(m => m.Description, new { @class = "form-control DescriptionArea", placeholder = "Description" }) 
       </div> 
       @Html.ValidationMessageFor(m => m.Description, null, new { @class = "text-danger" }) 
      </div> 
     </div> 
    } 
    </div> 

Answer 1

Попробуй так:

Html:

<div id="div1">Text1</div> 
<div id="div2">Text2</div> 
<button>toggle</button> 

сценарий :

function Togglediv() { 
    if ($("#div1").is(":visible")) { 
     $("#div2").hide(); 
    } else { 
     $("#div1").show(); 
    } 
} 

Togglediv(); 
$("button").click(function() { 
    $("#div1").toggle(); 
    $("#div2").toggle(); 
}); 

Answer 2

$('#yourbuttonid').click(function() { 
    $('#dividtohide').hide(); 
    $('#dividtoshow').show(); 
    return false; 
}); 

Answer 3

Since your are using <button> element you need to be aware of this , 

Всегда указывайте тип атрибута для элемента. Различные браузеры могут использовать разные типы по умолчанию для элемента.

по умолчанию в вашем случае может быть представить, что является причиной отправки формы, добавьте атрибут типа, как показано ниже, он должен работать

<button type="button" id="createHospitalContinuebtn" onclick="showHide()" class="fa fa-angle-right btn btn-default">Continue</button>