I've been browsing all day trying to find and answer to my problem. I'm stumped now and been running into walls. There are a lot of other topics about showing divs in an accordion-style (bootstrap) but my markup is a lot different than the examples I'm seeing. The way my page is setup is with 3 columns next to each other, then the divs that will appear(on the next row), coming up beneath these columns. I keep running into a lot of parent, child, and next scripts.
snapshot image
Better description
My first question is: is this even possible with my markup? I've tried using the .accordion-group class and data-parent technique but that accomplishes nothing. The other divs that were opened beforehand still persist and must be closed manually.
Secondly, how can I accomplish this?
My markup is as follows:
<section class="no-padding" id="products">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" data-toggle="collapse" data-target="#drums1">
<img src="" alt="img-1" class="img-responsive">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category<br>Click for details</div>
<div class="project-name">Rock Drums</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" data-toggle="collapse" data-target="#drums3">
<img src="" alt="img-3" class="img-responsive">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">Hip-Hop Drums<br></div>
</div>
</div>
</a>
</div>
</div>
<div class="product-descriptions collapse" id="drums1">
<div class="row">
<div class="col-md-6">Buy and description here</div>
<div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="product-descriptions collapse" id="drums2">
<div class="row">
<div class="col-md-6">Buy and description here</div>
<div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="product-descriptions collapse" id="drums3">
<div class="row">
<div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
<div class="col-md-6">Buy and description here</div>
</div>
</div>
</div>
</section>
The .product-descriptions classes just set the display:none.
Edit: The second image is a better description. The red crosses are "links" .portfolio-box that will open up the div(green box - .product-descriptions). Each red box has its own corresponding div. The green box is hidden until shown by clicking on the red boxes. I want the corresponding green box to change when a different red box is clicked.
Here's a example for a simple bootstrap accordion: When you click on one, it closes the others. There are 3 panels. First panel is open by default using the class "in".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Does anybody know how saving panel positions (in localStorage) works with LobiPanel's stateful option in Bootstrap?
The documentation says one must use the stateful option in order to save the position among it's siblings and it will apply them when you reload the browser.
Unfortunately when I do a reload on my site, the panel positions are always back to it's initial state.
It doesn't work, even though LobiPanel successfully adds parent keys and values to the Local Storage, e.g.:
lobipanel_parent_BKlPfuXKuW:"{"panel-2":0,"panel-3":1,"panel-1":2}"
lobipanel_parent_KyCQKms0ir:"{"panel-1":0,"panel-2":1,"panel-3":2}"
lobipanel_parent_lDSURxUHh2:"{"LwmEvZSUiF":0,"vpT9FMcurP":1,"awfVUjhLzE":2}"
lobipanel_parent_lk5lsV9Y3k:"{"panel-6":0,"panel-5":1,"panel-4":2}"
So the positions are actually saved to Local Storage but are somehow not applied when reloading.
This is how my HTML code (Bootstrap v3.3.5) looks like:
<div id="lobipanel-multiple lobipanel">
<h3>Multiple panels with drag & drop</h3>
<p>Drag panels by clicking on the headers</p>
<div class="bs-example">
<div class="row">
<div class="col-md-6 panel">
<div class="panel panel-default" data-index="0" data-inner-id="panel-1">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 1</h4>
</div>
</div>
<div class="panel-body">
Panel body 1
</div>
</div>
<div class="panel panel-warning" data-index="1" data-inner-id="panel-2">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 2</h4>
</div>
</div>
<div class="panel-body">
Panel body 2
</div>
</div>
<div class="panel panel-danger" data-index="2" data-inner-id="panel-3">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 3</h4>
</div>
</div>
<div class="panel-body">
Panel body 3
</div>
</div>
</div>
<div class="col-md-6 panel">
<div class="panel panel-success" data-index="3" data-inner-id="panel-4">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 4</h4>
</div>
</div>
<div class="panel-body">
Panel body 4
</div>
</div>
<div class="panel panel-info" data-index="4" data-inner-id="panel-5">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 5</h4>
</div>
</div>
<div class="panel-body">
Panel body 5
</div>
</div>
<div class="panel panel-danger" data-index="5" data-inner-id="panel-6">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 6</h4>
</div>
</div>
<div class="panel-body">
Panel body 6
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('.panel').lobiPanel({
sortable: true,
stateful: true
});
});
</script>
In the documentation there is example code for the stateful function but only for a single panel and not positions. So I still don't know how to address the CSS properly.
<!-- Stateful -->
<div>
<h3>Stateful. <small>Saves its state in localStorage</small></h3>
<div class="bs-example">
<div id="lobipanel-stateful" class="panel panel-default" data-inner-id="lobipanel-stateful">
<div class="panel-heading">
<div class="panel-title">
Panel title
</div>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#lobipanel-stateful').lobiPanel({
stateful: true
});
});
</script>
Thank you in advance.
I'm trying to change the collapse behavior in bootstrap, but without success.
I want to create a page with small panels (maybe col-md-4 that I named tabs) that changes the width after click, when the panel collapse.
Here is a example first page:
Here is the same page after click in the "tabs":
My current code, can't hide the <div>something here</div> and change the panel's width.
Below is the code for one panel with simple collapse effect.
<section class="col-md-4">
<h3 class="page-header title">Forms</h3>
<div class="panel-group">
<div id="panel-form-1" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span class="glyphicon glyphicon-chevron-right"></span><a data-toggle="collapse" href="#panel1"> Panel #1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
<form role="form" id="form1">
<div class="row">
<div class="col-md-6">
<div>Stuff</div>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</div>
</div>
<!-- Other panels-->
</div>
</section>
<div class="col-md-8 something">Something here</div>
JS (not working. No console errors):
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.collapse').on('show.bs.collapse', function (e) {
$(this).parent("section").removeClass("col-md-4").addClass("col-md-12");
$(document).find("div.something").hide();
});
</script>
My result page with opened panels is something like (please ignore the glyphicon problems):
I tried to follow the example in this another question here in SO, but I didn't understand it very well.
Is it possible achieve it using bootstrap?
Misc:
Bootstrap 3.3.7
JQuery 3.1.1
Chrome and Firefox
I write some control unit that switch couple of containers by using "collapse" class from bootstrap like list with anchors that has special for my hidden containers "href" attribute, here is example of two list elements that can describe behaviour:
<div id="my_list">
<ul>
<li class="active">
<a onclick="return false" data-parent="#switch_tables" href="#collapse1">One</a>
</li>
<li>
<a onclick="return false" data-parent="#switch_tables" href="#collapse2">Two</a>
</li>
</div>
Then in html code i use some container:
<div id="switch_tables" class="panel">
<div id="collapse1" class="collapse in"> SOME IN HERE </div>
<div id="collapse2" class="collapse"> SOMETHING ELSE</div>
</div>
So when i use this stuff and first elemet of list is active the first container is shown too because i add "in" class after "collapse" class. When I switch to the other list element, then first container should dissappear and the second one should be shown. Of course I has more list links and more hidden containers than just 2 but it's just an example. The thing that I want to do is to prevent default behaviour and to forbid active elemet to hide by clicking on it.
So I switch the "active" list element by clicking on list items and also show or hide exact container that has same id that the list has, so the containers is linked with list items, this thing is done by js code:
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$('.collapse.in').collapse('hide');
$(to_toggle+':not(".in")').collapse('show');
});
});
And now I see when I switch between list items, the containers appear and hide correctly.
When I click on second link, I see how first container is hiding and the second one is appear, and vice versa.
Idea is that if there is open containers, the ones that has "collapse in" class should be closed by js, but how to forbid closing an active container?
For example I click on second link in list, my first container is hiding, second one is appear, I click on second link again and second container dissappear so I dont see anything on screen. but the list item is active.
So the question is how to modify js so only one container can have "collapse in" class at a time, and nothing can remove it until the user will switch it to other container so class "in" will move to other container that is coming from anchor attribute "href" and can't be removed in this place?
If you are using bootstrap , so you can use bootstrap collapse feature for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapse</title>
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Collapse <small>Bootstrap Visual Test</small></h1>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Collapse one content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapse two content
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../collapse.js"></script>
</body>
</html>
So I solve my problem by point from #Zigri2612 but use little different approach:
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$("#switch_tables").find('div').each(function(){
if ( ('#'+$(this).attr("id")) != to_toggle )
$(this).filter('.collapse.in').collapse('hide');
});
$(to_toggle+':not(".in")').collapse('show');
});
});
Here is a working example for collapse hide and show. here the plus and minus icons are changing. you can alter it for your need.
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
.bs-example{
margin: 20px;
}
.accordion .fa{
margin-right: 0.5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
</style>
<div class="bs-example">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
</div>
I am told to make a shopping cart website using bootstrap with the images of products positioned in two rows and with three panels in each row
Although here i have coded for only one panel with the image within it,the main problem that I am facing is to adjust the position of panel which is always appearing on the top of the page.
I tried to enclose it in a div with id posi and then tried to position it using but it didn't work so please help.Further the image is appearing too big so what is the best method to re-size it so that the image responsiveness remains intact.I also have another question which is written in my code snippet(as a comment) if anybody knows the answer of that kindly help.
<!DOCTYPE HTML>
<html>
<head>
<title>
Web page
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
#posi
{
position=absolute;
top=100px;
right=50px;
}
</style>
</head>
<body>
<div id="posi">
<div class="container">
<div class="row" >
<div class="col-md-3 col-md-6" ><!--Although I have used this col-md-3 col-md-6 but I also want to know
what happens when we specify two column definitions in a single class like this-->
<div class="panel panel-default" >
<div class="panel-heading panel-primary">
Iphone 6
</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to set the position for top to take effect.
body,
html {
background: grey;
}
#wrapper {
top: 100px;
right: 50px;
position: absolute;
background: lightblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading panel-primary">Iphone 6</div>
<div class="panel-body">
<img src="http://store.storeimages.cdn-apple.com/4711/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-gold-2014?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=1411520675923"
class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
</div>
I have looked through the numerous questions others have posed about an accordion style collapsable set of panels but I haven't been able to find one in which the panels remain separate and do not retain a header of sorts.
I am looking to have numerous buttons on one side and on the other, a panel to be displayed when a button is clicked. I want only one panel to ever be displayed at a time. I am using BootStrap CSS Framework (love it).
I would greatly appreciate it if someone could please help me fine tune my code. I do not understand where I have gone wrong.
<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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Just add one more layer of panels
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You might have to adjust the classes for the inner content if you want to get rid of any extra padding / margin. The only thing you have to know is that bootstrap hides the children of any panels under the data-parent unless they match the data-target of what was just clicked.