First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<a href="#"><i class="entypo-calendar"></i></a>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>
Since you're using Bootstrap, just use the collapse
component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
A tiny error in your code, you had ==
where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
function toggle_div_fun(id){ var divelement = document.getElementById(id); if(divelement.style.visibility == 'hidden') divelement.style.visibility = 'visible'; else divelement.style.visibility = 'hidden'; }
<div align="right"> <button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button> </div> <!-- Add Guardian --> <div class="row" id="guardian"> <h4 class="title-well">Guardian</h4> <div class="checkbox"> <label> <input id="chkGuardian" type="checkbox">DECEASED </label> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianFirstName"><span class="text-danger">*</span> First Name</label> <input rv-value="applicant:personalInformation:guardianFirstName" class="form-control input-lg" name="guardianFirstName" id="guardianFirstName" data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianMiddleName"><span class="text-danger">*</span> Middle Name</label> <input class="form-control input-lg" name="guardianMiddleName" rv-value="applicant:personalInformation:guardianMiddleName" id="guardianMiddleName" data-validate="required" placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianLastName"><span class="text-danger">*</span> Last Name</label> <input rv-value="applicant:personalInformation:guardianLastName" class="form-control input-lg" name="guardianLastName" id="guardianLastName" data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianNationality"><span class="text-danger">*</span> Nationality</label> <input rv-value="applicant:personalInformation:guardianNationality" class="form-control input-lg" name="guardianNationality" id="guardianNationality" data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="dateOfBirth"><span class="text-danger">*</span> Date of Birth</label> <div class="input-group"> <input id="dateOfBirth" name="dateOfBirth" rv-value="applicant:personalInformation:guardianDateOfBirth | date" type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4"> <div class="input-group-addon"> <a href="#"><i class="entypo-calendar"></i></a> </div> </div> </div> </div> <div id="guardianDeceased"> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianHomeNumber"><span class="text-danger">*</span> Home Number</label> <input rv-value="applicant:personalInformation:guardianHomeNumber" class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber" data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianMobileNumber"><span class="text-danger">*</span> Mobile Number</label> <input rv-value="applicant:personalInformation:guardianMobileNumber" class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber" data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="inputEmail" class="control-label"><span class="text-danger">*</span>Email</label> <input rv-value="applicant:personalInformation:guardianEmailAddress" type="email" class="form-control input-lg" name="inputEmail" id="inputEmail" placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4"> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="row"> <div class="checkbox col-sm-12"> <label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address </label> </div> </div> </div> <div id="guardianAdd"> <div class="col-md-6"> <div class="form-group"> <label class="control-label" for="guardianStreetAddress"><span class="text-danger">*</span> Street Address</label> <input rv-value="applicant:personalInformation:guardianStreetAddress" class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress" data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" /> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianCity">City</label> <select rv-value="applicant:personalInformation:permanentAddress:guardianCity" type="text" class="form-control input-lg ref-city" name="guardianCity" id="guardianCity" data-validate="required"> <option value="" default selected></option> </select> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianProvince">Province</label> <select rv-value="applicant:personalInformation:permanentAddress:guardianProvince" type="text" id="guardianCity" name="guardianCity" class="form-control input-lg ref-province"> <option value="" default selected></option> </select> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label> <select rv-value="applicant:personalInformation:guardianCountry" name="guardianCountry" class="form-control input-lg ref-country" id="guardianCountry"> <option value="" default selected></option> </select> </div> </div> <div class="col-md-3"> <div class="form-group"> <label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label> <input class="form-control input-lg" rv-value="applicant:personalInformation:guardianPostalCode" name="guardianPostalCode" id="guardianPostalCode" data-validate="required" placeholder="Zip Code" /> </div> </div> </div> </div> <!-- End Guardian -->
here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.