Im trying to toggle hide/show a row in a data table and its not working. I know this method is working because it works almost everywhere I have put the element I am trying to toggle. It only seems to not work where it is now and thats where I need it to be.
Markup
<table class="slds-table slds-table_bordered" id="tableId">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
</th>
<th scope="col">
<div class="slds-truncate" title="Line">Line</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Part Num">Part Num</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Keyword">Keyword</div>
</th>
<th scope="col">
<div class="slds-truncate" title="EDD">EDD</div>
</th>
<th scope="col">
<div class="slds-truncate" title="COND">COND</div>
</th>
<th scope="col">
<div class="slds-truncate" title="OWNER">OWNER</div>
</th>
<th scope="col">
<div class="slds-truncate" title="WHSE">WHSE</div>
</th>
<th scope="col">
<div class="slds-truncate" title="UOM">UOM</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Qty Req">Qty Req</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Qty Rec">Qty Rec</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Qty Alloc">Qty Alloc</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Qty Accepted">Qty Accepted</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Qty Rejected">Qty Rejected</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Serial Number">Serial Number</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Loc">Loc</div>
</th>
<th scope="col">
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.poLineWrapper}" var="wrap">
<tr>
<td scope="row" data-label="Select">
<div class="slds-truncate" title="Select">
</div>
</td>
<td scope="row" data-label="Line">
<div class="slds-truncate" title="Line">
<ui:outputText value="{!wrap.line.inscor__Line_Number__c}" />
</div>
</td>
<td scope="row" data-label="Part Num">
<div class="slds-truncate" title="Part Num">
<ui:outputText value="{!wrap.line.inscor__Product__r.Name}" />
</div>
</td>
<td scope="row" data-label="Keyword">
<div class="slds-truncate" title="Keyword">
<ui:outputText value="{!wrap.line.inscor__Product__r.inscor__Keyword__c}" />
</div>
</td>
<td scope="row" data-label="EDD">
<div class="slds-truncate" title="EDD">
<ui:outputDate value="{!wrap.line.inscor__Expected_Delivery__c}" />
</div>
</td>
<td scope="row" class="condSelect" data-label="Cond">
<div class="slds-truncate" title="Cond">
<ui:inputSelect multiple="false">
<ui:inputSelectOption text="BER" label="BER" value="true"/>
<ui:inputSelectOption text="AR" label="AR"/>
<ui:inputSelectOption text="NE" label="NE"/>
</ui:inputSelect>
</div>
</td>
<td scope="row" data-label="Owner">
<div class="slds-truncate" title="Owner">
<ui:outputText value="{!wrap.line.inscor__Owner_Code__r.Name}" />
</div>
</td>
<td scope="row" data-label="WHSE">
<div class="slds-truncate" title="WHSE">
<ui:outputText value="{!wrap.line.inscor__Warehouse__r.Name}" />
</div>
</td>
<td scope="row" data-label="UOM">
<div class="slds-truncate" title="UOM">
<ui:outputText value="{!wrap.line.inscor__Product__r.inscor__UOM__c}" />
</div>
</td>
<td scope="row" data-label="Qty Requested">
<div class="slds-truncate" title="Qty Requested">
<ui:outputNumber value="{!wrap.line.inscor__Quantity__c}" />
</div>
</td>
<td scope="row" data-label="Qty Received">
<div class="slds-truncate" title="Qty Received">
<ui:outputNumber value="{!wrap.line.inscor__Quantity_Received__c}" />
</div>
</td>
<td scope="row" data-label="Qty Allocated">
<div class="slds-truncate" title="Qty Allocated">
<ui:outputNumber value="{!wrap.line.inscor__Quantity_Allocated__c}" />
<lightning:button class="qtAllocbutton" variant="brand" label="+" onclick="{! c.handleClick }" />
</div>
</td>
<td scope="row" class="numInput" data-label="Qty Accepted">
<div class="slds-truncate" title="Qty Allocated">
<ui:inputNumber value="{!wrap.quantityAccepted}" />
</div>
</td>
<td scope="row" class="numInput" data-label="Qty Rejected">
<div class="slds-truncate" title="Qty Rejected">
<ui:inputNumber value="{!wrap.quantityRejected}" />
</div>
</td>
<td scope="row" class="serialInput" data-label="Serial Number">
<div class="slds-truncate" title="Serial Number">
<ui:inputNumber value="{!wrap.serialNumber}" />
</div>
</td>
<td scope="row" data-label="Loc">
<div class="locLookup" title="Loc" style="margin-top: -20px;">
<c:strike_lookup value="{!wrap.location}" label=""
object="inscor__Inventory_Location__c" searchField="Name"
placeholder="Location"
iconName="custom:custom21"
subtitleField="inscor__Warehouse__c" order="Name"
loadingMessage="Loading..." errorMessage="Invalid input"
allowNewRecords="true"/>
</div>
</td>
<td scope="row" data-label="Tech Data">
<div class="slds-truncate" title="Tech Data" >
<lightning:button label="Tech Data" variant="brand" onclick=""/>
<aura:if isTrue="{!or(wrap.line.inscor__Internal_Comments__c,wrap.line.inscor__External_Comments__c)}">
<lightning:button name="{!wrap}" label="Comments" variant="brand" onclick="{!c.openCommentsPanel}"/>
</aura:if>
</div>
</td>
</tr>
<aura:If isTrue="{!wrap.showComments}">
<tr aura:If="123" class="hidden">
THIS NEEDS TO HIDE AND SHOW
</tr>
</aura:If>
</aura:iteration>
</tbody>
</table>
JS
openCommentsPanel : function(component, event, helper) {
var compTarget = component.find('123');
$A.util.removeClass(compTarget, 'hidden');
}
CSS
.THIS .hidden {
display: none;
}
I have tried messing around with it but have not have any luck. I must just not be understanding something about the way in which css classes are added or removed. Any and all help is appreciated.