I have drop down menu that should show section that user selects from drop down menu. I have created one simple example to show my code and how I'm showing/hiding containers. Everything works fine so far.
$(document).ready(function() {
$('#main-menu').find('a[data-container=hearing-container]').trigger('click').parent().addClass('active');
$('#main-container > div[id=test-container]').show();
$('#main-container > div:not([id=test-container])').hide();
});
$("#main-menu li a").on('click', mainMenu);
function mainMenu() {
var itemID = $(this).attr('data-container');
$(this).parent().addClass('active').siblings().removeClass('active');
$('#main-container > div[id="' + $(this).attr('data-container') + '"]').show();
$('#main-container > div:not([id="' + $(this).attr('data-container') + '"])').hide();
}<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="main-container" class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<p class="navbar-text"><span class="glyphicon glyphicon-home"></span> <b>Welcome to Single Page Application!</b></p>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul id="main-menu" class="dropdown-menu">
<li><a href="#" data-container="home-container">Home</a></li>
<li><a href="#" data-container="test-container">Test</a></li>
<li><a href="#" data-container="reports-container">Reports</a></li>
<li><a href="#" data-container="settings-container">Settings</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="home-container">
<ul id="agecny-navbar" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#agency-myaccount">My Account</a></li>
<li><a data-toggle="tab" href="#agency-finduser">Find User</a></li>
</ul>
<div class="tab-content">
<div id="agency-myaccount" class="tab-pane fade in active" data-name="MyAccount">
<form name="frm_myaccount" id="frm_myaccount" class="frm-agencySubmit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="acctive">Account Active</label>
<select class="form-control" name="frm_active" id="frm_active" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div id="test-container">
Test
</div>
<div id="reports-container">
Reports
</div>
<div id="settings-container">
Settings
</div>
</div>Then I added more code that actually use in my containers. In that case code from the previous example breaks and shows all containers. I have gone step by step and seems once I add the form tag with elements code starts breaking. If I remove that everything works fine. I'm not sure if bootstrap doesn't support any of these methods or something else caused this problem. If anyone see where is the problem in my code please let me know. Thanks.
</form>?