如何使用按钮显示/隐藏Div
[英]How to Show/Hide the Div using Button
问题描述
First, i wanted to automatically hide div part, then if i click the add guardian button. 
首先，我想自动隐藏div部件，然后如果我单击添加监护人按钮。 It will show the div part. 它将显示div部分。 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>
4 个解决方案
解决方案1
1 2016-04-06 11:24:54
Since you're using Bootstrap, just use the collapse component.. 由于您使用的是Bootstrap，因此只需使用collapse组件即可。
<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">
...
Demo: http://www.codeply.com/go/0jvcrckYOL 演示： http ： //www.codeply.com/go/0jvcrckYOL
解决方案2
0 2016-04-06 09:50:01
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';
解决方案3
0 2016-04-06 09:51:30
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 -->
解决方案4
-2 2016-04-06 09:54:59
here I'm giving you the short demo. 在这里，我给你简短的演示。 prefer below is your example. 下面是您的示例。 where you have to toggle DIV with class " Your_Class ". 您必须在其中使用类“ Your_Class”切换DIV。
HTML 的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 的CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用按钮onclick隐藏一个div并显示另一个div？ - How to hide one div and show another div using button onclick?
使用jQuery中的一个按钮隐藏/显示div - Hide / show div using one button in jQuery
显示/隐藏div按钮 - Show/Hide div with button
如何在单选按钮更改时隐藏/显示 div - How to hide/show div on radio button change
使用按钮显示div并在div外单击时隐藏它 - Show div using button and hide it if click outside the div
使用按钮切换显示/隐藏div吗？ - toggle show/hide div with button?
单击按钮显示/隐藏div - Show/hide div on button click
将显示隐藏按钮替换为div - Replace show hide button with div
如何使用jQuery隐藏和显示div的一部分 - How to hide and show a portion of a div using jQuery
如何使用CSS或Javascript隐藏和显示DIV - How To Hide and Show DIV using CSS or Javascript
相关标签