<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Pages Snippet">
<meta name="author" content="Rafael Montero">
<title>Pages</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".col-md-3">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand title"><span>Docs</span></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- <li>
<a href="#">About</a>
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div id="bodyContent" class="container">
<div class="row">
<div class="col-md-3">
<p class="lead">Menu</p>
<div class="list-group">
<a class="list-group-item welcome active" href="#">Welcome</a>
<a class="list-group-item home" href="#">Home</a>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="list-group-item category accordion-toggle collapsed" data-toggle="collapse" href="#collapse1"> Tree 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<a class="list-group-item tree1window1" href="#">Tree 1 - Window1</a>
<a class="list-group-item tree1window2" href="#">Tree 1 - Window2</a>
</ul>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="list-group-item category accordion-toggle collapsed" data-toggle="collapse" href="#collapse2">Tree 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<a class="list-group-item tree2Window1" href="#">Tree 2 - Window1</a>
<a class="list-group-item tree2Window2" href="#">Tree 2 - Window2</a>
</ul>
</div>
</div>
</div>
<div class="list-group">
<a class="list-group-item reports" href="#">Reports</a>
<a class="list-group-item settings" href="#">Settings</a>
</div>
</div>
<div class="col-md-9">
<div class="pages welcome visible">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Welcome</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages home">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Home</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages tree1window1">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Tree 1 - Window 1</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages tree1window2">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Tree 1 - Window 2</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages reports">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Reports</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages settings">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Settings</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages tree2Window1">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Tree2 - Window 1</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="pages tree2Window2">
<img class="img-responsive" src="http://placehold.it/800x300" alt="">
<div class="caption-full">
<h4><a href="#">Tree 2 - Window 2</a>
</h4>
<p>See more snippets like these online store reviews at <a target="_blank" href="http://bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
<p>Want to make these reviews work? Check out
<strong><a href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this building a review system tutorial</a>
</strong>over at maxoffsky.com!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<div id="footer" class="container">
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Pages by BlackTaurusCr</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
.container{
margin-left: 5px;
margin-right: 5px;
}
.panel-title{
font-size: 14px;
color: #555;
}
.panel.panel-default {
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}
.panel-group{
margin-bottom: 0px;
}
.list-group{
margin-bottom: 0px;
}
.panel-collapse{
margin-left: 10px;
margin-right: 10px;
}
.panel-heading{
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
.list-group-item.category{
border-top-width: 0px;
border-bottom-width: 0.1px;
}
.list-group-item.reports{
border-top-width: 0px;
}
#bodyContent{
margin-top: 20px;
}
.col-md-3 {
width: 210px;
}
html, body {
height:100%;
}
.navbar-inverse {
background-color: #007296;
border-color: #1fb5ad;
}
.navbar-inverse .navbar-brand {
color: #eee;
padding-top: 5px;
}
div.navbar-header > div.title {
padding-top:22px;
padding-left: 16px;
}
.navbar{
min-height: 58px;
}
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
div.pages{
display: none;
}
.pages img {
width: 100%;
}
.pages {
padding: 0;
}
.pages .caption-full {
padding: 9px;
color: #333;
}
footer {
margin: 50px 0;
}
$(document).ready(function() {
$("div.pages.welcome").fadeIn("slow");
$("a.list-group-item").on("click", function() {
//If the element is not active
if (!$(this).hasClass("active")) {
$("a.active").removeClass("active");
$(this).addClass("active");
//Hide div page shown
$("div.pages").hide();
//List of div/pages to show or hide
if ($(this).hasClass("home")) {
$("div.pages.home").fadeIn("slow");
}
if ($(this).hasClass("welcome")) {
$("div.pages.welcome").fadeIn("slow");
}
if ($(this).hasClass("tree1window1")) {
$("div.pages.tree1window1").fadeIn("slow");
}
if ($(this).hasClass("tree1window2")) {
$("div.pages.tree1window2").fadeIn("slow");
}
if ($(this).hasClass("reports")) {
$("div.pages.reports").fadeIn("slow");
}
if ($(this).hasClass("settings")) {
$("div.pages.settings").fadeIn("slow");
}
if ($(this).hasClass("open")) {
$("div.pages.open").fadeIn("slow");
}
if ($(this).hasClass("tree2Window1")) {
$("div.pages.tree2Window1").fadeIn("slow");
}
if ($(this).hasClass("tree2Window2")) {
$("div.pages.tree2Window2").fadeIn("slow");
}
}
//If clicked option with category class.
if ($(this).hasClass("category")) {
//Collapses other opened div sibblings
$("div").siblings(".panel-collapse.collapse.in").collapse("hide");
//Unselects others options
$("a.active").removeClass("active");
//Opens first child of opened category div
$(this).parent().parent().next().children().children().first().trigger( "click" );
}
else if ($(this).parent().parent().prev().children().children().hasClass("category")) {
//Do nothing when selected children of opened category
}
//Collapses category when selected non-category option
else if ($(".panel-collapse.collapse").hasClass("in")){
$(".panel-collapse.collapse").collapse("hide");
}
});
});
