I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.
The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.
Here is my complete code of my cshtml file in which i have used the tabdrop.js...
<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
if (top.location != location) {
top.location.href = document.location.href;
}
$(function () {
window.prettyPrint && prettyPrint();
$('.nav-tabs:first').tabdrop();
$('.nav-tabs:last').tabdrop({ text: 'More options' });
$('.nav-pills').tabdrop({ text: 'With pills' });
});
</script><link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" /><div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div id="loading-example">
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="content">
<ul class="nav nav-tabs tabs-example" role="tablist">
<li class="active"><a href="#tabs-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a href="#tabs-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
<li><a href="#tabs-tab3" role="tab" data-toggle="tab">Tab 3</a></li>
<li><a href="#tabs-tab4" role="tab" data-toggle="tab">Tab 4</a></li>
<li><a href="#tabs-tab5" role="tab" data-toggle="tab">Tab 5</a></li>
<li><a href="#tabs-tab6" role="tab" data-toggle="tab">Tab 6</a></li>
<li><a href="#tabs-tab7" role="tab" data-toggle="tab">Tab 7</a></li>
<li><a href="#tabs-tab8" role="tab" data-toggle="tab">Tab 8</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-tab1">
<p>This is tab 1!</p>
</div>
<div class="tab-pane" id="tabs-tab2">
<p>This is tab 2!</p>
</div>
<div class="tab-pane" id="tabs-tab3">
<p>This is tab 3!</p>
</div>
<div class="tab-pane" id="tabs-tab4">
<p>This is tab 4!</p>
</div>
<div class="tab-pane" id="tabs-tab5">
<p>This is tab 5!</p>
</div>
<div class="tab-pane" id="tabs-tab6">
<p>This is tab 6!</p>
</div>
<div class="tab-pane" id="tabs-tab7">
<p>This is tab 7!</p>
</div>
<div class="tab-pane" id="tabs-tab8">
<p>This is tab 8!</p>
</div>
</div>
<!-- top row -->
<!-- /.row -->
</section><!-- /.content -->
</aside>
</div>
</div>I have the css files stored in the location
Content\css
and Javascript Files stored in the location
Content\js
The cshtml file has the bootstrap theme of ADMINLTE bootstrap.
Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?