I would like the bottom panel to expand its width to col-md-12when the top panel is collapsed, and when the user expands the top panel again the width of the bottom panel goes back to col-md-8.
I'm fairly new at this, but this is my code so far:
var panel = document.getElementById("panel");
var panel1 = document.getElementById("panel1");
function secondPanelResize() {
if (panel.style.height <= "45") {
panel1.classList.remove("col-md-8");
panel1.classList.add("col-md-12");
} else {
panel1.classList.remove("col-md-12");
panel1.classList.add("col-md-8");
}
}
<div class="panel-group col-md-12">
<div class="col-md-8" id="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" onclick="secondPanelResize()" id="collapse">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body" id="panelbody">Panel Body</div>
</div>
</div>
</div>
<div class="col-md-8" id="panel1">
<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 in">
<div class="panel-body" id="panelBody">Panel Body</div>
</div>
</div>
</div>
</div>
I've managed to make the bottom panel expand its width when the top panel is closed, but I cannot figure out how to make the width reduce to its original when the top panel is open.
Here's a basic example of adding and removing CSS classes with JS.
function topPanel() {
var topPanelEle = document.getElementById('topPanel')
var bottomPanelEle = document.getElementById('bottomPanel')
if (!topPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
topPanelEle.classList.add('expanded');
}
bottomPanelEle.classList.remove('expanded');
}
function bottomPanel() {
var topPanelEle = document.getElementById('topPanel')
var bottomPanelEle = document.getElementById('bottomPanel')
if (!bottomPanelEle.classList.contains('expanded')) { //To aviod multiple clicks
bottomPanelEle.classList.add('expanded');
}
topPanelEle.classList.remove('expanded');
}
.top-panel {
padding: 16px;
background-color: red;
}
.bottom-panel {
padding: 16px;
background-color: blue;
}
.expanded {
height: 100px;
}
Expand Top Panel
<div id="topPanel" class="top-panel">Top Panel</div>
Expand Top Panel
<div id="bottomPanel" class="bottom-panel">Bottom Panel</div>
Now for in your case I'm not entirely sure because no CSS was given but in your added classes (like expanded in my case) could contain height: 100% !important and override the default CSS that was added (like top-panel or bottom-panel in my case) which could be something like height: 50%. I also find it easier using 2 functions or having 1 with a parameter so I know whether it's the top or bottom panel straight from where its being called, unless you have 1 button as a toggle.
Related
I am trying to make a simple admin panel. I added a sidebar as layout. I want to keep it fixed. But when I scroll down the page my sidebar also scrolls down. Here is how it looks at the beginning of page:
And when I scroll down the page:
I want to keep it as in picture 1 even the page is scrolled down. The beginning of siderbar is like this:
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar" style="max-height:100%">
Edit: I tried .navbar-nav { position: fixed; left: 0; top: 0; bottom: 0, width: 150px; } and result is:
Try this way
<div class="container-fluid">
<div class="row">
<div class="col-md-3 px-1 bg-dark position-fixed">
...
</div>
<div class="col-md-offset-3 col-md-9 col-sm-12">
<h1>Main Area</h1>
...
</div>
</div>
</div>
I have a ser of divs that are created, but only showed when a boolean value is true, it works fine, but if i have two divs and maximize it, that div maximize below the first div, and so on, each div maximize where it is created on html. I want to, when maximize onde div, it passes to first place, above first.
I've made a fiddle, that mimics the funtion now, on that fiddle, for example, i want to click on div#3 and it goes above div#1, then click on div#4 and goes above div#3, that was in above div#1.
http://jsfiddle.net/zwpCF/112/
Basically, whenever I click on a div, I want it to go on top of all other.
My code of divs are:
DIV1
<div class="col-lg-6">
<h4 class="panel-title">
<div class="card-header">
<select (change)="onChange($event.target.value)" data-ng-model="barChart" ngbTooltip="{{'chartType' | translate}}">
//options
</select>
<i class="fa fa-expand icons topright" data-toggle="collapse" data-parent="#accordion" href="#timeline1" ngbTooltip="{{'Expand' | translate}}">
</i>
</div>
</h4>
<div class="card-block">
<canvas id="barChart" [hidden] = "!barChartSelected"></canvas>
<canvas id="chart2" [hidden] = "!chart2Selected"></canvas>
<canvas id="rdr" [hidden] = "!radarChartSelected"></canvas>
<canvas id="pp1" [hidden] = "!pp1ChartSelected"></canvas>
</div>
</div>
<div id="timeline1" class="panel-collapse collapse"></div>
##DIV2
<div class="col-lg-6">
<h4 class="panel-title">
<div class="card-header">
<select (change)="onChange($event.target.value)" data-ng-model="barChart" ngbTooltip="{{'chartType' | translate}}">
//options
</select>
<i class="fa fa-expand icons topright" data-toggle="collapse" data-parent="#accordion" href="#timeline2" ngbTooltip="{{'Expand' | translate}}">
</i>
</div>
</h4>
<div class="card-block" [hidden] = "!visibleDiv1">
<canvas id="barChart_2" [hidden] = "!barChartSelected2"></canvas>
<canvas id="chart2_2" [hidden] = "!chart2Selected2"></canvas>
<canvas id="rdr_2" [hidden] = "!radarChartSelected2"></canvas>
<canvas id="pp1_2" [hidden] = "!pp1ChartSelected2"></canvas>
</div>
</div>
<div id="timeline2" class="panel-collapse collapse"></div>
##DIV3 and ##DIV4 are lookalike ##DIV1 and ##DIV2
You can use prependTo
$("#source").prependTo("#destination");
It inserts every element in the set of matched elements to the beginning of the target.
Here is the documentation.
Working snippet:
$("#div1").click(function() {
$("#div1").prependTo($("#main"));
});
$("#div2").click(function() {
$("#div2").prependTo($("#main"));
});
$("#div3").click(function() {
$("#div3").prependTo($("#main"));
});
.sorteable {
width: 300px;
border: 5px solid grey;
padding: 25px;
margin: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="div1" class="sorteable">Div1</div>
<div id="div2" class="sorteable">Div2</div>
<div id="div3" class="sorteable">Div3</div>
</div>
How is this (comments by the lines I have added) - I have used closest to get the container and prepend to move the container to the top.
$('.panel-title').click(function() {
var $this = $(this), // this is the title
$column = $this.closest('.col-md-6'); // this is the full item
// Find parent with the class that starts with "col-md"
// Change class to "col-md-3"
$this.closest('[class^="col-md"]')
.toggleClass('col-md-6 col-md-12')
// Find siblings of parent with similar class criteria
// - if all siblings are the same, you can use ".siblings()"
// Change class to "col-md-2"
.siblings('[class^="col-md"]')
.removeClass('col-md-3')
.addClass('col-md-6');
$column.parent().prepend($column) // prepend the column to the parent - moves it to the top
});
Updated fiddle
I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work properly. Sometimes i have to click more than one time and some times the chart inside don't resizes like the div. (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
I could use angularjs too.
Thank you.
Use this:
$(".elementoGrafico").each(function() {
let panel = this;
$(this).find(".resize-button").click(function() {
$(panel).toggleClass("col-md-12");
$(panel).toggleClass("col-md-6");
});
});
What this does is find the resize button for each panel and assign it a click handler which changes the panel itself.
I have some collapseable panels and i want to add a resize button. For this i've made this javascript code:
function myFunction () {
$(".elementoGrafico").click(function () {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
the html code is:
<div class="col-md-12 ui-state-default elementoGrafico">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" class="component-button max-min-button more-less glyphicon glyphicon-chevron-up"></a>
Gráfico 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in elemento"> <canvas class="chart" id="myChart"></canvas>
</div>
</div>
</div>
</div>
But it doesn't work. How can make it work? (i want a code that works for all elements, not just one, so i want to do it using class, not id.)
Thank you.
"elemnto1" is not how you grab each class, you're missing the period
$(".elemento1").each()
edit:
$(".elemento1").click(function() {
$(this).toggle("col-md-12");
$(this).toggle("col-md-6");
});
function myFunction () {
$( "elemento1" ).each(function() {
$(this).toggleClass("col-md-12");
$(this).toggleClass("col-md-6");
});
};
I'm trying to generate an accordion with ng-repeat much as shown in the following sample:
<div class="panel-group" id="accordion">
<div ng-repeat="One_Item in Items_List track by One_Item.Item_ID">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{One_Item.Item_ID}}" href="This_Page/#collapse_{{One_Item.Item_ID}}">
{{One_Item.Item_ID}}</a>
</h3>
</div>
<div class="panel-collapse collapse in" id="collapse_{{One_Item.Item_ID}}">
<div class="panel-body">
<div class="form-group" style="margin:0px 0px 5px -15px">
<label class="control-label col-sm-3">For Item-ID {{One_Item.Item_ID}} the related text is {{One_Item.Text}}</label>
<!--- Other stuff... -->
</div>
</div>
</div>
</div>
</div>
</div>
All works OK (in terms of the data being shown), except that when expanding on entry in the accordion, other entry(ies) that were expanded do not collapse.
Checked a lot of examples but still cannot figure out why.
I don't know why do you create new one accordion
there is good one at https://angular-ui.github.io/bootstrap/ components
Default settings uibAccordionConfig
closeOthers (Default: true) - Control whether expanding an item will cause the other items to close.
Hope it help you
This worked for me. It may need some tweaking to suit your markup exactly.
The general idea is to problematically collapse the others when one is clicked.
var $triggers = $element.find('[data-toggle="collapse"]');
$triggers.on('click', function () {
var t = $(this);
$.each($triggers, function(i, $trigger) {
if ($trigger !== t) {
$($trigger).parent().find('.collapse').collapse('hide');
}
});
});