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
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.
Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
I have a jquery plugin that creates following html
<div class="panel-heading">
<h4 class="">
<a data-toggle="collapse" href="#collapse2" class="collapsible-title display-inline full-width bold">Select Gigs</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<input type="text" class="input-text-field margin-medium-bottom" placeholder="Search" />
</div>
</div>
...... and some other divs here .....
I want to toggle div with id collapse2 when click on <a></a> above it. It works fine if I add the html inside hbs file. But when I create above html inside jquery and insert into the DOM as follows it change the url to domain/#collapse2
_initializeAutoComplete: function () {
Ember.$('#' + this.get('divId')).setAutocomplete({
data: this.get('dataTree'),
multiSelect: true,
selectingType: 3
});
}.on('didInsertElement')
});
How can I make the toggling work without ember going to href as a url change?
Appreciate any help.
Move the bootstrap attributes to the div above (or h4 or create new as your need)
<div class="panel-heading" data-toggle="collapse" href="#collapse2" class="collapsible-title display-inline full-width bold">
<h4 class="">
Select Gigs
</h4>
</div>
I have an accordion div (panel-collapse), at the end of the panel I have a submit button, initially, all the panel div are closed, I want to keep the state of the div the same after the submit reload.
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
On a regular form submit the page gets reloaded and resets everything, but if you submit the form Asynchronously using ajax nothing will change on your page. Using php + jQuery, you could do something like this:
$(document).on("click","#submitButton",function(e) {
e.preventDefault();
var formData = $("#formID").serialize();
$.post("your_php_file.php",formData,function(response) {
console.log(response);
});
});
Only way to preserve setting without async requests is using cookies.
You can set them via Javascript:
(http://www.w3schools.com/js/js_cookies.asp)
Probably like assigning an array of active collapse panels
var active_panels=[0,1,2];
$.cookie('active_panels', JSON.stringify(active_panels))
Without jQuery see W3C specification
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>