<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> function displayContent(contentId) { $(".my-content").addClass('hide'); $(".my-content#" + contentId).removeClass('hide'); } $(document).on('ready', function() { displayContent('content_1'); }); </script> <!-- ---- Include the above in your HEAD tag -------- --> <!-- I was motivated to create this after seeing BhaumikPatel's http://bootsnipp.com/snippets/featured/accordion-menu; I adapted it to a list format rather than a table so that it would be easy to create a nav toggle button when viewed on mobile devices --> <div class="col-md-3"> <div id="sidenav1"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sideNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="sideNavbar"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="javascript:displayContent('content_1');"><span class="glyphicon glyphicon-home"></span>Home</a> </h4> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-book"> </span>Research<span class="caret"></span></a> </h4> </div> <!-- Note: By adding "in" after "collapse", it starts with that particular panel open by default; remove if you want them all collapsed by default --> <div id="collapseOne" class="panel-collapse collapse in"> <ul class="list-group"> <li><a href="javascript:displayContent('content_2');"><span class="glyphicon glyphicon-book"></span>Overview</a></li> <li><a href="javascript:displayContent('content_2');" class="navlink">Link 1</a></li> <li><a href="javascript:displayContent('content_3');" class="navlink">Link 2</a></li> <li><a href="javascript:displayContent('content_4');" class="navlink">Link 3</a></li> <li><a href="javascript:displayContent('content_1');" class="navlink">Link 4</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-cog"> </span>Services<span class="caret"></span></a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <ul class="list-group"> <li class="navlink2"><a href="" class="navlink"><span class="glyphicon glyphicon-cog"></span>Overview</a></li> <li><a href="" class="navlink">Link 1</a></li> <li><a href="" class="navlink">Link 2</a></li> <li><a href="" class="navlink">Link 3</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="col-md-9"> <div id="content_1" class="my-content hide">İlk içerik</div> <div id="content_2" class="my-content hide">İkinci içerik</div> <div id="content_3" class="my-content hide">Üçüncü içerik</div> <div id="content_4" class="my-content hide">Dördüncü içerik</div> </div>

/********* SIDE NAV BAR ***********/ a { color:#000; } li { list-style:none; } .panel-default>.panel-heading { color: #fff; background-color: #00436a; border-color: #ddd; } .panel-group .panel+.panel { margin-top: 0px; } .panel-group { margin-top: 35px; } .panel-collapse { background-color:rgba(220, 213, 172, 0.5); } .glyphicon { margin-right:10px; } ul.list-group { margin:0px; } ul.bulletlist li { list-style:disc; } ul.list-group li a { display:block; padding:5px 0px 5px 15px; text-decoration:none; } ul.list-group li { border-bottom: 1px dotted rgba(0,0,0,0.2); } ul.list-group li a:hover, ul li a:focus { color:#fff; background-color: #00436a; } .panel-title a:hover, .panel-title a:active, .panel-title a:focus, .panel-title .open a:hover, .panel-title .open a:active, .panel-title .open a:focus { text-decoration:none; color:#fff; } .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a { display: block; } @media (min-width: 768px){ .navbar-collapse.collapse { display: block!important; height: auto!important; padding-bottom: 0; overflow: visible!important; padding-left:0px; } } @media (min-width: 992px){ .menu-hide { display: none; } } .menu-hide .panel-default>.panel-heading { color: #fff; background-color: #8e8c8c; border-color: #ddd; } /********** END SIDEBAR *************/ /********** NAVBAR TOGGLE *************/ .navbar-toggle .icon-bar { background-color: #fff; } .navbar-toggle { padding: 11px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: #a32638; border-radius: 0px; } /********** END NAVBAR TOGGLE *************/