Javascript 如何使用按钮显示/隐藏Div

首先，我想自动隐藏div部分，然后单击addguardian按钮。它将显示div部分。这是我的密码。先谢谢你。我也在这里指出我的脚本。请查收，谢谢

<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>

添加监护人
守护者
已故的
*名字
*中间名
*姓
*国籍
*出生日期
*家庭号码
*手机号码
*电子邮件
地址与当前地址相同
*街道地址
城市
省份
*国家
*邮政编码
功能切换\u div\u fun（id）{
var divelement=document.getElementById（id）；
if（divelement.style.display=='none'）
divelement.style.display==“块”；
其他的
divelement.style.display==“无”；
}
您的代码中有一个小错误，您需要一个
=

if(divelement.style.display == 'none')
  divelement.style.display = 'block';
else
  divelement.style.display = 'none';


功能切换\u div\u fun（id）{
var divelement=document.getElementById（id）；
if（divelement.style.visibility=='hidden'）
divelement.style.visibility='visible'；
其他的
divelement.style.visibility='hidden'；
}

添加监护人
守护者
已故的
*名字
*中间名
*姓
*国籍
*出生日期
*家庭号码
*手机号码
*电子邮件
地址与当前地址相同
*街道地址
城市
省份
*国家
*邮政编码
在这里，我给你一个简短的演示。下面是你的例子。在这里，您必须用类“Your_class”切换DIV

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>

JS

.Your_Class { display:none;}
.Your_Class.active { display:block;}

$(".btn-primary").click(function(){
    if($(".Your_Class").hasClass('active')) {
        $(this).removeClass('active');
    }
    else
    {
        $(this).addClass('active');
    }
});

信诺
    <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">
          ...