Bootstrap toggle button works only once when clicked - html

Question

I'm having problems in the Bootstrap navigation menu. When I freshly reload my page, the toggle button works fine i.e. on click it shows the li items. However, after the first click, it does not work. In my Master page I already have a Navigation Menu of Bootstrap, which is working absolutely fine. The problem is occurring for my child page.
Here is my rendered code for the first time:
<nav class="navbar navbar-default" role="tab">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" id="tabHeader">
<li>
<a class="dropdown-toggle align-center tabColor" id="divFavItemsTab" data-toggle onclick="ShowFavouriteNew();">
<asp:Literal ID="literalMyFav" runat="server" Text="<%$ Resources:Resource,lblMyFavorites %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divMyItemsListTab" datatoggle onclick="ShowMyItemsNew();">
<asp:Literal ID="literalCmpitems" runat="server" Text="<%$ Resources:Resource,lblCompanyItem %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divPackageTab" onclick="ShowPackagesNew();">
<asp:Literal ID="ltrlCmpPackages" runat="server" Text="<%$ Resources:Resource,lblPackage %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabSelected" id="divOnlineTab" onclick="ShowOnlineNew();">
<asp:Literal ID="ltrlOnline" runat="server" Text="<%$ Resources:Resource,lblOnline %>"></asp:Literal>
</a>
</li>
</ul>
</div>
</div>
</nav>
This is my code when I click on the toggle button:
<nav class="navbar navbar-default" role="tab">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse in" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav" id="tabHeader">
<li>
<a class="dropdown-toggle align-center tabColor" id="divFavItemsTab" data-toggle onclick="ShowFavouriteNew();">
<asp:Literal ID="literalMyFav" runat="server" Text="<%$ Resources:Resource,lblMyFavorites %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divMyItemsListTab" datatoggle onclick="ShowMyItemsNew();">
<asp:Literal ID="literalCmpitems" runat="server" Text="<%$ Resources:Resource,lblCompanyItem %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabColor" id="divPackageTab" onclick="ShowPackagesNew();">
<asp:Literal ID="ltrlCmpPackages" runat="server" Text="<%$ Resources:Resource,lblPackage %>"></asp:Literal>
</a>
</li>
<li>
<a class="dropdown-toggle align-center tabSelected" id="divOnlineTab" onclick="ShowOnlineNew();">
<asp:Literal ID="ltrlOnline" runat="server" Text="<%$ Resources:Resource,lblOnline %>"></asp:Literal>
</a>
</li>
</ul>
</div>
</div>
</nav>
Up till now everything works fine, and I can see on click my li items. But this happens only for the first click. If I click again on the button so that these li" items get collapsed, they are not. I found out that in class as you can see above gets appended after first click is not being removed on second click. So what I did was I ran a jQuery like this:
$("#btnBsTab").click(function () {
if ($("#bs-example-navbar-collapse-2").hasClass("in")) {
$("#bs-example-navbar-collapse-2").removeClass("in");
} else {
$("#bs-example-navbar-collapse-2").addClass("in").css({height:'auto !important'});
}
});
});
Here btnBsTab is the button id, and I removed the data-target attribute from the code.
Now this works fine for me but I don't want to do like this way as bootstrap itself offers "data-target" functionality that actually handles div id on every click.
I am using jquery-1.9.0 and bootstrap 3.0.0 css and bootstrap.js also.