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

时间:2016-04-06 09:39:29

标签: javascript html twitter-bootstrap

首先,我想自动隐藏div部分,然后如果我点击添加监护人按钮。它将显示div部分。这是我的代码。先感谢您。我也在这里指出我的剧本。请检查,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 个答案:

答案 0 :(得分:1)

由于您正在使用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">
          ...

演示:http://www.codeply.com/go/0jvcrckYOL

答案 1 :(得分:0)

您的代码中出现了一个小错误,您需要==,而您需要一个=

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

答案 2 :(得分:0)

&#13;
&#13;
function toggle_div_fun(id){

                    var divelement = document.getElementById(id);
                    if(divelement.style.visibility == 'hidden')
                        divelement.style.visibility = 'visible';
                    else
                        divelement.style.visibility = 'hidden';
                }
&#13;
<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 -->
&#13;
&#13;
&#13;

答案 3 :(得分:-2)

这里我给你简短的演示。以下是你的榜样。你必须用“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>

<强> 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');
    }
});