My current task involves creating a dash board which is uses tree structure and table.
My code is available in the plunker - https://plnkr.co/edit/Fe1LAcc8iNP03dImlWUn?p=preview
I want to know how achieve the below points in the above plunker.
1) If the parent is checked then all its children should get checked.
For example, if Name is checked then all its children repo1,repo8 and repo7 should get checked automatically. Similarly all the children of repo1,repo7 and repo8.
2) If I manually check the children of say repo1 then repo1 also should get checked. If even one child is un checked then repo1 should get unchecked too.
Help on this is appreciated.
index.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>
<div class="row">
<div class="col-md-9">
<div style=" margin-left:50px;" class="tableheight">
<table class="table-nested ">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
Repository
</th>
<th >
Version
</th>
<th >
Size
</th>
<th >
Modified By
</th>
<th >
Labels
</th>
<th >
Description
</th>
</tr>
</thead>
<tbody style="font-size:12px" data-ng-repeat="item in list">
<tr >
<td ><button style="background-color: #fff;" class="accordion"></button>
{{item.name}}
</td>
<td >
{{item.Version}}
</td>
<td >
{{item.Size}}
</td>
<td >
{{item.ModifiedBy}}
</td>
<td >
{{item.Labels}}
</td>
<td >
{{item.Description}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Related
I have two tables parent and child now I want to link the child table data with the parent heading cell. I can't change the code structure like removing the child table because this is done in Odoo and also js link with this structure. I tried a lot but didn't achieve the correct output.
The HTML code is
Note: These columns should have more width depending upon their table data columns are Account, Partner, Subject
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Current Output of the table
So even though these tables are seperated, we can still use some styling to at least make it look like it's one table. But yeah the structure is quite bad and it would help a lot if you could make sure each row has always the same amount of columns. That the first row has 4 columns and the second one 8 does make this kind of a Hail Mary.
But the general idea is you give each column the width it needs.
/* Default to hide some generated styling*/
ul{ display:none; }
.p-0{ padding: 0!important; }
tbody{ font-size: 14px!important; }
table table {margin-bottom: 0!important; }
table table td { border-top: none!important; }
/*A small zoom(out) and min-width if screen is not big enough */
.container-fluid{ zoom: 0.8; min-width: 1100px; }
/* Default for 8 columns if they all would be equal*/
th, td{ width: 12.5%; }
/*The "Magic", specific widths for each column */
/*Obviously works best if each row has 8 columns*/
/*Play with it, but make sure it adds up to 100%*/
th:nth-child(1),
td:nth-child(1){
width: 20%;
}
th:nth-child(2),
td:nth-child(2){
width: 10%;
}
th:nth-child(3),
td:nth-child(3){
width: 5%;
}
th:nth-child(4),
td:nth-child(4){
width: 20%;
}
th:nth-child(5),
td:nth-child(5){
width: 15%;
}
th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
width: 10%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>==
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
I used blaze templates in my meteor project. I coded all tables in blaze templates.
used Meteor/easy search package to search table data. and use kuronin pagination for the subscription base pagination.
Now I want to covert that tables to the data tables. What is the best way to do it?
This is my code base.
<table class="table table-hover am-customers-table-2" id="mytable">
<thead>
<tr>
<th width="20%"><label>Customer Name</label></th>
<th width="15%"><label>Phone Number</label></th>
<th width="35%"></th>
<th width="5%"></th>
<th width="10%"><label>Actions</label></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<!-- {{#EasySearch.Each index=searchCustomersIndex }} -->
{{#each documents}}
<tr style="{{#if flagStatus}}background-color: #FB299D33;{{/if}}">
<td>
<div class="single-line-list-item">
<span class="number">{{getFirstLettersOfTheName name}}</span>
<div class="data">
<span>{{name}}</span>
</div>
</div>
</td>
<td>
<span>{{number}}</span>
</td>
<td>
</td>
<td>
</td>
<td>
{{#if flagStatus}}
<button class="btn btn-sm btn-success markAsFlag" style="float: left">UnFlag</button>
{{else}}
<button class="btn btn-sm btn-danger customerMarkAsFlag" style="float: left">Flag</button>
{{/if}}
</td>
<td>
<button class="btn btn-sm btn-default" style="float: left">View Profile</button>
</td>
</tr>
<!-- {{/EasySearch.Each}} -->
{{/each}}
</tbody>
</table>
Can't you simply initialise the dataTable in .onRendered like so:
Template.onRendered(function () {
this.$('table.table').dataTable();
});
I want to drag n drop items from one table onto another table. So far this works. Now i want to highlight the cells from the table which i want to drop those items.
It should display the borders or cell background when i hover the element over it. I tried jquery drop, but can't get it to work, it throws me an uncaught error.
I can't get my head around this.
Below is my snippet so far.
/* Below is search for the Table Assignment Board */
$(function() {
$.expr[':'].containsIgnoreCase = function(n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#reservationManagerListTableNumberInput').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
search(true);
else
$(this).data('timer', setTimeout(search, 100));
});
});
function search(force) {
if (this.value == '') {
$('#table2 tbody tr').show();
return;
}
var word = $('#reservationManagerListTableNumberInput')[0].value;
var word_filter = $('#table2 tbody tr');
if ($.trim(word) != '')
word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
$('#table2 tbody tr').hide();
word_filter.show();
}
/* Drag and Drop action from Table Reservation to Table Assignment Schedule */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("resElement").innerHTML = "Drop Reservation on table slot";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("resElement").innerHTML = "Reservation preassigned with table";
}
/* Below visual drop effect */
$(function() {
$("#dragtarget").draggable();
$("#droptarget").droppable({
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
#table2 th+th,
#table2 td+td,
#table2 th,
#table2 td {
border-left: 2px solid #F5F5F5;
border-bottom: 2px solid #F5F5F5;
font-size: 0.75vw;
}
#table1 th+th,
#table1 td+td,
#table1 th,
#table1 td {
border-left: 2px solid #F5F5F5;
border-bottom: 2px solid #F5F5F5;
font-size: 0.75vw;
}
.tableinfoTime {
Width: 60px;
}
.tableinfo {
Width: 52.3px;
}
.scheduleHeader {
Width: 52px;
}
.scheduleHeaderTop {
Width: 52.3px;
}
.scheduleHeaderText {
font-size: 0.6vw;
vertical-align: middle;
}
.reservationListHeaderText {
font-size: 0.6vw;
vertical-align: middle;
}
.reservationListItemText {
font-size: 0.75vw;
vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Below is Dining Schedule -->
<div class="container-fluid" id="main_container">
<!-- tables inside this DIV could have draggable content -->
<div class="row">
<!-- left container (table with subjects) -->
<div class="col-lg-4" style="background-color: none;" id="left">
<table class="table table-fixed table-sm">
<th>
Search by any criteria <span class="badge badge-default">3 letters minimum</span>
</th>
</table>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationManagerListInput" placeholder="Search for reservation.. ">
<table class="table table-fixed table-sm table-hover" style="margin-top:0.5em;">
<thead>
<tr>
<th>
<div class="reservationListHeaderText">
Res ID
</div>
</th>
<th>
<div class="reservationListHeaderText">
Table Type
</div>
</th>
<th>
<div class="reservationListHeaderText">
Time
</div>
</th>
<th>
<div class="reservationListHeaderText">
Pax
</div>
</th>
<th>
<div class="reservationListHeaderText">
Cabin
</div>
</th>
<th>
<div class="reservationListHeaderText">
Name
</div>
</th>
<th>
<div class="reservationListHeaderText">
Status
</div>
</th>
<th>
<div class="reservationListHeaderText">
SR
</div>
</th>
</tr>
</thead>
<tbody class="">
<tr>
<td>
<div class="droptarget reservationListItemText" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">
Drag me
</p>
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End left container -->
<div class="col-lg-8" style="background-color: none;">
<table class="table table-fixed table-sm">
<th>
<label>Table assignment Schedule</label>
</th>
<th>
<p class="reservationListItemText" id="resElement"></p>
</th>
</table>
<!-- right container -->
<div id="right">
<input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="search" id="reservationManagerListTableNumberInput" placeholder="Search for any table or Reservation.. ">
<table class="table table-responsive table-sm table-hover" style="margin-top:0.5em;" id="table2">
<thead class="header">
<tr>
<!-- if checkbox is checked, clone reservation subjects to the whole table row -->
<th>
<div class="scheduleHeaderTop">
<input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
<input id="report" type="checkbox" title="Show Assignment report" /></div>
</th>
<th>
<div class="scheduleHeaderTop">Ttl Tbl.</div>
</th>
<th>
<div class="scheduleHeaderTop">Ttl Bkg.</div>
</th>
<th>
<div class="scheduleHeaderTop">Ttl Pax</div>
</th>
<th>
<div class="tableinfoTime">11:00</div>
</th>
<th>
<div class="tableinfoTime">11:30</div>
</th>
<th>
<div class="tableinfoTime">12:00</div>
</th>
<th>
<div class="tableinfoTime">12:30</div>
</th>
<th>
<div class="tableinfoTime">13:00</div>
</th>
<th>
<div class="tableinfoTime">13:30</div>
</th>
<th>
<div class="tableinfoTime">14:00</div>
</th>
<th>
<div class="tableinfoTime">14:30</div>
</th>
<th>
<div class="tableinfoTime">17:00</div>
</th>
<th>
<div class="tableinfoTime">17:30</div>
</th>
<th>
<div class="tableinfoTime">18:00</div>
</th>
<th>
<div class="tableinfoTime">18:30</div>
</th>
<th>
<div class="tableinfoTime">19:00</div>
</th>
<th>
<div class="tableinfoTime">19:30</div>
</th>
<th>
<div class="tableinfoTime">20:00</div>
</th>
<th>
<div class="tableinfoTime">20:30</div>
</th>
<th>
<div class="tableinfoTime">21:00</div>
</th>
<th>
<div class="tableinfoTime">21:30</div>
</th>
<th>
<div class="tableinfoTime">22:00</div>
</th>
</tr>
</thead>
<tbody class="reservationManagerScrolltbody">
<tr>
<td colspan="24" class="reservationManagerTableType">
<table class="table table-responsive table-fixed table-sm waiterStationtableinfoTime">
<thead class="header" id="TableAssignmentSchedule_thead">
<tr>
<th>
<div class="scheduleHeaderText">Table Number</div>
</th>
<th>
<div class="scheduleHeaderText">Table Type</div>
</th>
<th>
<div class="scheduleHeaderText">Bookings Assigned</div>
</th>
<th>
<div class="scheduleHeaderText">Guest Assigned</div>
</th>
<th colspan="20" style="text-align:center;"> Waiterstation 1</th>
</tr>
</thead>
<tbody id="TableAssignmentSchedule_tbody">
<tr>
<td>
<div class="scheduleHeader">146</div>
</td>
<td>
<div class="scheduleHeader">2 TOP</div>
</td>
<td>
<div class="scheduleHeader">6</div>
</td>
<td>
<div class="scheduleHeader">16</div>
</td>
<td>
<div class="tableinfoTime"> </div>
</td>
<td>
<div class="tableinfoTime droptarget" ondrop="drop(event)" ondragover="allowDrop(event)" id="droptarget">here</div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- right container -->
</div>
<!-- drag container -->
</div>
<!-- main container -->
</div>
I would like to know how can i turn the accordion to 90 degree on click of it for repo and bundles in the below plunkr. I am new to css. Any hekp on this is appreciated. Plunkr link - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable" >
<div class="row">
<div class="col-md-12">
<div class="tableheight ">
<table class="treetable-nested childtable">
<thead>
<tr>
<th style="width:5%;">
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th>
<th >
Name
</th>
<th class="cell-members">
Version
</th>
<th class="cell-members">
Size
</th>
<th class="cell-members">
Date Modified
</th>
<th class="cell-members">
Labels
</th>
<th class="cell-members">
Description
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
<tr id={{item.id}}>
<td>
<button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
</td>
<td>
{{item.name}}
</td>
<td class="cell-members">
<!-- {{item.version}} --> 0
</td>
<td class="cell-members">
<!-- {{item.size}}--> 0
</td>
<td class="cell-members" >
<!-- {{item.date}}--> 0
</td>
<td class="cell-members">
{{item.label}}
</td>
<td class="cell-members">
{{item.description}}
</td>
</tr>
<tr ng-if='item.children && item.children.length > 0'>
<td colspan="7" id="bundle_1" >
<table ng-show="item.showTree" class="treetable-nested" style="width:100%;">
<tbody ng-repeat='bundles in item.children'>
<tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
<td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
<td>{{bundles.bundleName}}</td>
<td class="cell-members">{{bundles.bundleVersion}}</td>
<td class="cell-members">{{bundles.bundleSize}}</td>
<td class="cell-members">{{bundles.bundleModified}}</td>
<td class="cell-members">{{bundles.bundleLabels}}</td>
<td class="cell-members">{{bundles.bundleDescription}}</td>
</tr>
<tr ng-show='showComponents' ng-repeat='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;">
<td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/></td>
<td>{{components.value}}</td>
<td>{{components.Version}}</td>
<td>{{components.Size}}</td>
<td>{{components.Modified}}</td>
<td>{{components.Labels}}</td>
<td>{{components.Description}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Here is how I solved your problem:
Step 1: Figure out how to rotate elements with CSS. You can use the CSS transform property to rotate elements.
Step 2: Define a CSS class which would apply the transformation to the icon
.accordion.expanded:before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
Step 3: Figure out how to apply the CSS class with the transformation through AngularJS. You can toggle CSS classes with AngularJS in multiple ways.
One option would be passing the $event onlick
<button class="accordion" ng-click="displayChildren(item,item.id,$event)"></button>
and toggling the class on the element like:
$scope.displayChildren = function(item, id, event) {
angular.element((event.target)).toggleClass('expanded');
//rest of your logic
}
The second option is by manipulating a variable and setting the class to ng-class like
<button class="accordion" ng-click='showComponents = !showComponents' ng-class="{'expanded' : showComponents}"></button>
You can find the plunker i tried this out here
You can do this:
.accordion:active {
transform: rotateX(90deg);
}
If you want it rotetes permanently use jquery:
$('.accordion').click(function(){$(this).css('transform', 'rotateX(90deg)');});
and if you want it rotates and rotate back by button click:
<style>
.rotated {
transform: rotateX(90deg);
}
</style>
$('#btnRotator').click(function(){$('.accordion').toggleClass('rotated');});
Use Angular to attach an active class to expanded accordions that applies the CSS transform.
.accordion.active:before {
transform:rotate(90deg);
}
Looks like you can add ng-class="{'active' : item.showTree}" to accomplish an active class on the button. You also already have an :after target for an active class so you should remove that too.