core114
Reputation: 5335
Bootstrap 4 Navs Drop Down List Issue
I'm developing some Navs forms for my university projects, I used [email protected], This is my issue, I selected Book item, navs is working on it selected Child items and again click the Organais item after repeated Navs items details, you can check it. I attached my code in jsfiddle. please look at my code https://jsfiddle.net/9qsacmr4/4/
look at the image displayed some red color line in my issue 
Thanks
Upvotes: 0
Views: 115
Answers (2)
Jignesh Bhavani
Reputation: 393
Looks like your code has too many id repeated. id attribute must should be unique. I have rename some of your repeated id with number. and removed unwanted </div>
inputState -> inputState2 and inputState3
Check updated jsfiddle
EDIT: Replaced form content with Static text.
EDIT 2: working with all 3 forms
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-wrapper">
<div class="container-fluid">
<!-- section-two-->
<div class="agrarian-section-addnewaccount" style="margin-top: -0.5rem;">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Select Your Account Type </a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">Book</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">Organais</a>
<a class="dropdown-item" id="pills-dropdown3-tab" href="#pills-dropdown3" role="tab" data-toggle="pill" aria-controls="pills-dropdown3">Child</a>
</div>
</li>
</ul>
<!-- tab section-->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">
<!-- tab section head-->
<div class="row">
<div class="col-sm-12">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<p class="WD-txt-hd">Individual Account</p>
</li>
</ol>
</div>
</div>
<!-- tab section head-->
<div class="row">
<div class="col-sm-12">
<div class="card">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAccNum" class="col-form-label">Account Number</label>
<input type="text" class="form-control" id="inputAccNum" placeholder="Account Number">
</div>
<div class="form-group col-md-6">
<label for="inputGivName" class="col-form-label">Given Name</label>
<input type="text" class="form-control" id="inputGivName" placeholder="Given Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputSurName" class="col-form-label">Sure Name</label>
<input type="text" class="form-control" id="inputSurName" placeholder="Sure Name">
</div>
<div class="form-group col-md-6">
<label for="inputOthName" class="col-form-label">Other Name</label>
<input type="text" class="form-control" id="inputOthName" placeholder="Other Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputInd-DOB" class="col-form-label">Date of Birth</label>
<div class="input-group input-append date" id="datePicker-IndDOB" >
<input type="text" class="form-control" name="date" value="" placeholder="DOB" />
<span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div>
</div>
<div class="form-group col-md-6">
<label for="inputGENDER" class="col-form-label">Gender</label>
<br>
<label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label>
<label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputNIC" class="col-form-label">NIC </label>
<input type="text" class="form-control" id="inputNIC" placeholder="NIC">
</div>
<div class="form-group col-md-6">
<label for="inputADD" class="col-form-label">Residential Address</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="1" placeholder="Address"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState" class="col-form-label">State</label>
<select id="inputState" class="form-control">
<option selected>Select your state</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputMobile" class="col-form-label">Mobile</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputTeli" class="col-form-label">Teliphone</label>
<input type="text" class="form-control" id="inputTeli" placeholder="Teliphone">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputSrvCentre" class="col-form-label">Services Centre</label>
<select id="inputStatetwo" class="form-control">
<option selected>Select your Services Centre</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">
<!-- tab section head-->
<div class="row">
<div class="col-sm-12">
<ol class="breadcrumb">
<li class="breadcrumb-item active">
<p class="WD-txt-hd">Organaisational Account</p>
</li>
</ol>
</div>
</div>
<!-- tab section head-->
<div class="row">
<div class="col-sm-12">
<div class="card">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputOrgAccNum" class="col-form-label">Account Number</label>
<input type="text" class="form-control" id="inputOrgAccNum" placeholder="Account Number">
</div>
<div class="form-group col-md-6">
<label for="inputOrgName" class="col-form-label">Organisation Name</label>
<input type="text" class="form-control" id="inputOrgName" placeholder="Organisation Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputOrgOpenerName" class="col-form-label">Account Opener Name</label>
<input type="text" class="form-control" id="inputOrgOpenerName" placeholder="Account Opener Name">
</div>
<div class="form-group col-md-6">
<label for="inputOrgOpenrMobile" class="col-form-label">Account Opener Mobile</label>
<input type="text" class="form-control" id="inputOrgOpenrMobile" placeholder="Account Opener Mobile">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputOrgDOB" class="col-form-label">Organisation Started Date</label>
<div class="input-group input-append date" id="datePicker-OrgDOB" >
<input type="text" class="form-control" name="date" value="" placeholder="Organisation Started Date" />
<span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div>
</div>
<div class="form-group col-md-6">
<label for="inputOrgStatus" class="col-form-label">Organisation Status</label>
<input type="text" class="form-control" id="inputOrgStatus" placeholder="Organisation Status">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputOrgRegNumber" class="col-form-label">Organisation Reg: Number </label>
<input type="text" class="form-control" id="inputOrgRegNumber" placeholder="Organisation Reg: Number">
</div>
<div class="form-group col-md-6">
<label for="inputOrgADD" class="col-form-label">Organisation Address</label>
<textarea class="form-control" id="OrgADD" rows="1" placeholder="Organisation Address"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity2">
</div>
<div class="form-group col-md-4">
<label for="inputState2" class="col-form-label">State</label>
<select id="inputState2" class="form-control">
<option selected>Select your state</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip" class="col-form-label"> Zip </label>
<input type="text" class="form-control" id="inputZip" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputOegEmail" class="col-form-label"> Organisation Email </label>
<input type="email" class="form-control" id="inputOrgEmail" placeholder="Organisation Email">
</div>
<div class="form-group col-md-6">
<label for="inputOrgTeli" class="col-form-label"> Teliphone </label>
<input type="text" class="form-control" id="inputOrgTeli" placeholder="Organisation Teliphone">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputSrvCentre" class="col-form-label"> Services Centre </label>
<select id="inputStatetwo2" class="form-control">
<option selected>Select your Services Centre</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-dropdown3" role="tabpanel" aria-labelledby="pills-dropdown3-tab">
<div class="row">
<div class="col-sm-12">
<ol class="breadcrumb">
<li class="breadcrumb-item active">
<p class="WD-txt-hd">Children Account</p>
</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputOrgAccNum" class="col-form-label">Account Number</label>
<input type="text" class="form-control" id="inputOrgAccNum2" placeholder="Account Number">
</div>
<div class="form-group col-md-6">
<label for="inputChildGivName" class="col-form-label">Given Name</label>
<input type="text" class="form-control" id="inputChildGivName" placeholder="Given Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputChildOpenerName" class="col-form-label">Sure Name</label>
<input type="text" class="form-control" id="inputChildOpenerName" placeholder="Sure Name">
</div>
<div class="form-group col-md-6">
<label for="inputChildOpenrOther" class="col-form-label">Other Name</label>
<input type="text" class="form-control" id="inputChildOpenrOther" placeholder="Other Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputChildDOB" class="col-form-label">Date Of Birth</label>
<div class="input-group input-append date" id="datePicker-ChildDOB" >
<input type="text" class="form-control" name="date" value="" placeholder="DOB" />
<span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div>
</div>
<div class="form-group col-md-6">
<label for="inputChildGENDER" class="col-form-label">Gender</label>
<br>
<label class="custom-control custom-radio">
<input id="Childradio1" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label>
<label class="custom-control custom-radio">
<input id="Childradio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputChildADD" class="col-form-label">Residential Address</label>
<textarea class="form-control" id="ChildADD" rows="1" placeholder="Residential Address"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity3">
</div>
<div class="form-group col-md-4">
<label for="inputState3" class="col-form-label">State</label>
<select id="inputState3" class="form-control">
<option selected>Select your state</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="inputZip2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputChildMobie" class="col-form-label">Mobile</label>
<input type="Text" class="form-control" id="inputChildMobile" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputChildTeli" class="col-form-label">Teliphone</label>
<input type="text" class="form-control" id="inputChildTeli" placeholder="Teliphone">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputChildGuardianName" class="col-form-label">Guardian Name</label>
<input type="text" class="form-control" id="inputChildGuardianName" placeholder="Guardian Name">
</div>
<div class="form-group col-md-6">
<label for="inputSrvCentre2" class="col-form-label">Services Centre</label>
<select id="inputStatetwoe2" class="form-control">
<option selected>Select your Services Centre</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /tab section-->
</div>
</div>
</div>
</div>
</div>Upvotes: 1
piyush patel
Reputation: 9
Try this
Add J-query script and add java script then add select box for drop down. select box drop down value set main form div class. example : <select> <option value="book">Book</option> </select> <div class="book box"> Put Form Here
Check this Below Link
Example - https://jsfiddle.net/DEVPIYUSH/98rb0xsf/
Upvotes: 0
Related Questions
- Bootstrap 4 Navigation Bar Dropdown Issue
- Bootstrap 4 Navbar Dropdown Menu Links
- Trouble with Navbar Bootstrap dropdown
- navbar dropdown not working in bootstrap4.0
- Dropdowns not working in Bootstrap navbar
- Bootstrap 4-alpha-2 navbar with dropdown position issues
- Issue with dropdown
- problems with bootstrap navbar dropdowns
- bootstrap drop down inside navbar not correctly displayed
- Bootstrap 2.1.1 dropdowns not working properly