<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="rootwizard">
<ul class="list-inline">
<li><a href="#tab1" data-toggle="tab">Tech1.Name</a></li>
<li><a href="#tab2" data-toggle="tab">Tech2.Name</a></li>
<li><a href="#tab3" data-toggle="tab">Tech3.Name</a></li>
<li><a href="#tab4" data-toggle="tab">Tech4.Name</a></li>
<li><a href="#tab5" data-toggle="tab">Tech5.Name</a></li>
<li><a href="#tab6" data-toggle="tab">Tech6.Name</a></li>
<li><a href="#tab7" data-toggle="tab">Tech7.Name</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
<!--Load html From Nother file. Create Template for reuse-->
<div id="wrapper" class="active">
<!-- Sidebar -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul id="sidebar_menu" class="sidebar-nav">
<li class="sidebar-brand"><a id="menu-toggle" href="#">Subjects<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li>
</ul>
<ul class="sidebar-nav" id="sidebar">
<li><a>Subject1.Name<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<ul class="sidebar-nav" id="sidebar">
<li><a>Subject2.Name<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Subject3.Name<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
</ul>
<li><a>Subject4.Name<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
<li><a>Subject5.Name<span class="sub_icon glyphicon glyphicon-link"></span></a></li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- Keep all page content within the page-content inset div! -->
<div class="page-content inset">
<div class="row">
<div class="col-md-12">
<p class="well lead">Subject1.Name</p>
<div class="container">
<!--HTML Posted here Buy Php jquery Load page method-->
<h1>Beatus autem esse in maximarum rerum timore nemo potest.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Duo Reges: constructio interrete. Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere. <mark>Illa tamen simplicia, vestra versuta.</mark> Quid de Platone aut de Democrito loquar? Restinguet citius, si ardentem acceperit. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Neque solum ea communia, verum etiam paria esse dixerunt. </p>
<p>Minime vero, inquit ille, consentit. Quod autem in homine praestantissimum atque optimum est, id deseruit. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur. Quae similitudo in genere etiam humano apparet. Cur, nisi quod turpis oratio est? Aeque enim contingit omnibus fidibus, ut incontentae sint. </p>
<p>Dici enim nihil potest verius. Rhetorice igitur, inquam, nos mavis quam dialectice disputare? A villa enim, credo, et: Si ibi te esse scissem, ad te ipse venissem. Cur, nisi quod turpis oratio est? Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. An vero, inquit, quisquam potest probare, quod perceptfum, quod. <b>Illud non continuo, ut aeque incontentae.</b> Bonum integritas corporis: misera debilitas. Non risu potius quam oratione eiciendum? Quis enim potest ea, quae probabilia videantur ei, non probare? </p>
<ol>
<li>Quae contraria sunt his, malane?</li>
<li>Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P.</li>
</ol>
<p>Quid censes in Latino fore? Quod non faceret, si in voluptate summum bonum poneret. Restatis igitur vos; Placet igitur tibi, Cato, cum res sumpseris non concessas, ex illis efficere, quod velis? Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. </p>
<h2>Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim?</h2>
<p>In qua si nihil est praeter rationem, sit in una virtute finis bonorum; <i>Pauca mutat vel plura sane;</i> Venit ad extremum; Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; <mark>Facete M.</mark> </p>
<pre>
Nam sunt et in animo praecipua quaedam et in corpore, quae
cum leviter agnovit, tum discernere incipit, ut ea, quae
prima data sunt natura, appetat asperneturque contraria.
Ergo hoc quidem apparet, nos ad agendum esse natos.
</pre>
<!--Replace with jquery load div>
</div> <!-- fim div da esquerda -->
</div>
<p class="well lead">An Experiment using the sidebar (<a href="http://animeshmanglik.name">animeshmanglik.name</a>)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
.row{
margin-left:0px;
margin-right:0px;
}
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-left: -150px;
left: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: left;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-left: 0;
margin-left: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: left;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
@media (max-width:767px) {
#wrapper {
padding-left: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
left: 70px;
}
#wrapper.active {
padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
left: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
