We Keep Coding

Position div to first place - stack like

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

add and remove class on resize button click

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");
});
};

Trigger event when uib-accordion is opened

I´m trying to trigger an event when the accordion is opened. The event should just get triggered when the accordion is getting opened, not when getting closed.
HTML:
<uib-accordion>
<uib-accordion-group is-open="status.open" ng-click="showList(status.open)"
ng-init="count=0">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': status.open,
'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
{{count}}
</uib-accordion-group>
</uib-accordion>
App.js (inside the Controller)
$scope.showList = function (status){
if(status)
{
$scope.count = $scope.count + 1;
}
};
For the sake of simplicity the event just increments count by one. I just want to know how to trigger an event when the accordion is opened.

this is an old thread, but since I bumped into the same issue, here is the solution I came up with.
uib-accordion[-group] directive has toggleOpen() scoped function. so you cannot change that from outside controller.
let's override template - accordion takes template-url. take the original template from:
https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html
and create your own
remove toggleOpen() from root <div> and <a> tags.
while you feeding uib-accordion-heading, bind click/key-press event with your controller function - ie) myToggleOpen(myIsOpenModel) make sure your heading covers whole section
in myToggleOpen, do what you need
html
<uib-accordion>
<div uib-accordion-group template-url="myTemplate.html" ng-repeat="item in items track by $index" is-open="item.isOpen">
<uib-accordion-heading>
<div ng-click="myToggleOpen(item)">Toggle!</div>
</uib-accordion-heading>
<div class="content">
Hello!
</div>
</div>
</uib-accordion>
js
scope.myToggleOpen = function (item) {
item.isOpen = !item.isOpen;
}
myTemplate.html (change more if needed)
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
</h4>
</div>
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" ng-transclude></div>
</div>

Bootstrap Angular.js accordion not auto collapsing

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');
}
});
});

How to set class to div tag using javascript

I am doing project in laravel. I have one variable $emails_unread_count which stores the unread emails which is a random. I want to add new class in the blade file to this number of divs so that I can add css only for the unread emails and not for read once.
My blade file looks like,
display.blade.php
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
#foreach($data as $from)
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{$from->id}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{'collapse' . $from->id}}" aria-expanded="true" aria-controls="{{'collapse' . $from->id}}">
{{$from->from}}
</a>
</h4>
</div>
<div id="{{'collapse' . $from->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$from->id}}">
<div class="panel-body">
{{$from->body}}
</div>
</div>
</div>
#endforeach
</div>
I want to add new class named as 'unread' to the "panel-heading" div. This class should be applied to the unread number of emails. Please give suggestions.

To change class for an element in javascript use:
document.getElementById("MyElement").className = "MyClass";
To add an additional class to an element:
document.getElementById("MyElement").className += " MyClass";

use .addClass(). Here is the documentation
$("div.panel-heading").addClass("unread");

document.getElementById("myDIV").className = "mystyle";

I would do
$('div.panel-heading').addClass('unread').removeClass('ifyouneedany');
Note :
Make sure you are doing this in document ready like this
$( document ).ready(function() {
//your code here
});
or in any proper click or some change functions