I need help to solve this problem, i know AlpineJs must use something for "fragments", its fine when i workin on div, but when i do loop table row, and have another row, it become a problem, because i cant use div for the fragment. is there any solution?
here's my code
<template x-for="data in data">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data2 in data.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data3 in data2.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
</template>
</template>
</template>
Related
I am making the project, in which I am trouble in Jquery.
Description: I have two tables.
First: Select User Type
second: Selected Users
The first table has 3 user type and the Second table have a User name with user Type.
What I try: In Project If I selected User type: vendor, then all the user of table second whose Vendor is select and change background color to red.
$(".RTtbl .fa").click(function () {
$(this).find(".fa").addClass(".bg-info");
});
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td style="width:33.33%;">
<i class=" fa fa-user"</i>
User
</td>
<td style="width:33.33%">
<i class="fa fa-user-o" ></i>
Vendor
</td>
<td style="width:33.33%">
<i class="fa fa-user-circle-o" ></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
</table>
This is JQuery code to achieve Answer:
$("#user").click(function(){
$('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
$('.fa-user').parent('td').addClass('bg-info');
});
$("#vendor").click(function(){
$('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
$('.fa-user-o').parent('td').addClass('bg-success');
})
$("#celeb").click(function(){
$('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
$('.fa-user-circle-o').parent('td').addClass('bg-warning');
})
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
.bg-success{
background:green;
}
.bg-warning{
background:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td id="user" style="width:33.33%;">
<i class=" fa fa-user"></i>
User
</td>
<td id="vendor" style="width:33.33%">
<i class="fa fa-user-o" ></i>
Vendor
</td>
<td id="celeb" style="width:33.33%">
<i class="fa fa-user-circle-o" ></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
</table>
suppose if you want single color for active
$(".RTtbl td").click(function(){
$('td').removeClass('bg-info');
var clName = $(this).children('i').attr('class');
clName = clName.split(' ');
$('.'+clName[1]+'').parent('td').addClass('bg-info');
$('.'+clName[1]+'').parent('td').siblings('td').addClass('bg-info');
$(this).siblings().removeClass('bg-info');
});
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td id="user" style="width:33.33%;">
<i class="fa fa-user"></i>
User
</td>
<td id="vendor" style="width:33.33%">
<i class="fa fa-user-o" ></i>
Vendor
</td>
<td id="celeb" style="width:33.33%">
<i class="fa fa-user-circle-o" ></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
</table>
I believe this is what you want to do: http://jsfiddle.net/mer29tsv/16/
Please let me know if the output is as expected. When you use $(this).find() you are finding in the cell of the first table, and applying the class to it.
You need to apply it to the second table by using the appropriate className. Also, using data-attributes would be better to connect the upper table to the lower table, the code I have attached will only work if the icon className is in a specific format.
I had to change the bg-info class name because it's already declared somewhere which is giving a background color of blue.
// you need to click the tabel cell, not the icon
$(".RTtbl td").click(function() {
// Get the icon class
let cls = $(this).find('i').attr('class');
// Reset selection
$(this).siblings().removeClass('bg-info');
$(`.Fatbl i`).parent().removeClass('bg-info');
// Select the cells accordingly
// Do not write ".bg-info" because it's for query onlyu
$(this).addClass('bg-info');
$(`.Fatbl i[class="${cls}"]`).parent().addClass('bg-info');
});
.RTtbl {
background: #fcffe5;
}
td {
cursor: pointer;
}
/* bg-info is a built-in bootstrap class, not recommended to change it */
/*
.bg-info {
background: red;
}
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td style="width:33.33%;">
<i class="fa fa-user" </i> User
</td>
<td style="width:33.33%">
<i class="fa fa-user-o"></i> Vendor
</td>
<td style="width:33.33%">
<i class="fa fa-user-circle-o"></i> Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o"></i> Kisan </td>
</tr>
</table>
$(".menu").click(function () {
var elem = $(this).find('.fa');
//console.log($(this));
$(".Fatbl").find('.fa').parent().removeClass("bg-info");
$(".Fatbl").find(`.${elem.attr('class').split(" ")[1]}`).parent().addClass("bg-info");
$('.menu').removeClass("bg-info");
elem.parent().addClass("bg-info");
});
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl" style="font-size:14px;">
<tr>
<td class="menu" style="width:33.33%;">
<i class="fa fa-user"></i>
User
</td>
<td class="menu" style="width:33.33%">
<i class="fa fa-user-o"></i>
Vendor
</td>
<td class="menu" style="width:33.33%">
<i class="fa fa-user-circle-o"></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
</table>
I'm using Angularjs to repeat some elements in my HTML. Angular repeats the divs correctly, but when trying to repeat an specific div it just doesn't work. Explanation after the code:
<tr ng-repeat="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
<tr class="spacer"></tr>
</tr>
Angular repeats everything inside <tr ng-repeat="x in controlList" class="tr-shadow"> </tr> BUT the last div <tr class="spacer"></tr>
If I comment the spacer the ng-repeat it does repeat the spacer, but if I don't the spacer only shows once at the end of the repeated code.
<!-- <tr class="spacer"></tr> -->
I tried changing the HTML Tag for spacer but I'm having the same issue.
As you can see in the Chrome's debugger, the spacer shows after the repeated code:
If you really want to include your spacer in your iteration there is another option called ng-repeat-start and ng-repeat-end
Something like the following should work
<tr ng-repeat-start="x in controlList" class="tr-shadow">
<td>{{x.fecha_control}} </td>
<td>{{x.hora}}</td>
<td class="desc">{{x.valor}}</td>
<td><span class="block-background level-color--{{x.color}} ">{{x.texto}} </span></td>
<td>
<span class="status">{{x.momento}} </span>
</td>
<td>
<div class="table-data-feature">
<button ng-click="editControl($event)" id="{{x.id}}" class="item" data-toggle="tooltip" data-placement="top" title="Edit">
<i class="zmdi zmdi-edit"></i>
</button>
<button class="item" data-toggle="tooltip" data-placement="top" title="Delete">
<i class="zmdi zmdi-delete"></i>
</button>
</div>
</td>
</tr>
<tr class="spacer" ng-repeat-end>...</tr>
You can find this exact information here on their documentation page.
<tr> inside <tr> is not valid html. You must include ng-class="{'spacer': someCondition}"
<tr ng-repeat="x in controlList" class="tr-shadow" ng-class="{'spacer': someCondition}>
Try to add condition ng-if="$last" to your spacer
I have a table where I show items from the database with the ng-repeat. The items are subscriptions which can have weekly or monthly subscription. The table has 3 columns name, weekly and monthly. When a subscription has weekly a tick appear in the cell under the column weekly and if monthly the same. I'm using a ng-if in the td tag like next:
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'WeeklyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'MonthlyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
What I would like to reach is that to have that 2 td merged in one with an ng-class, showing the tick under the right column. I would like to do that for make more clean the code if that is possible.
The entire table:
<table class="table full-width no-border" ng-if="subscriptionEnginesFromServer.length != 0">
<thead>
<tr>
<th class="width-240">
Engine name
</th>
<th class="width-240">
Weekly
</th>
<th class="width-240">
Monthly
</th>
</tr>
</thead>
<tbody ng-show="!loading">
<tr ng-repeat="engine in subscriptionEnginesFromServer | orderBy:'name'">
<td class="">
<!-- clickable-td -->
<span class="first-letter-to-upper">
{{engine.name}}
</span>
<span class="button-icon button--primary button--delete" ng-click="removeEngineFromSubscriptionServer(websites)">
<i class="fa fa-trash-o"></i>
</span>
</td>
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'WeeklyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
<td class="td-with-button center valign-top">
<span ng-if="engine.type == 'MonthlyAnalytics'" class="fa fa-check" aria-hidden="true">
</span>
</td>
</tr>
</tbody>
</table>
Something like?
<td colspan="2" ng-class="{
'class-weekly': engine.type == 'WeeklyAnalytics,
'class-monthly': engine.type == 'MonthlyAnalytics
}">
Use css to define styles for the classes appropriately.
I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle
I'm working on a table which contains hidden details for each row. Table rows are made with Bootstrap accordion.
Accordion rows and hidden details are working fine but the JS that changes the chevron icon when toggling [collapsed/expanded] is not working properly. It should change the chevron icon just on the clicked row but currently it changes the chevron icon for all rows.
I have read some related posts regarding my question and have tried them all but I'm unable to get it working. What I'm missing?
There is a Bootply Demo here
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='#Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
Change your .parent() to .prev() or .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
This should work:
$(".accordion-toggle").on("click", function () {
if($(this).find(".fa").hasClass("fa-plus-square")) {
$(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
} else {
$(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
}
});