Toggle CSS class not working

Question

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.

Answer 1

You're using the showComments Boolean attribute, so you don't need to mess with any CSS. Instead, you need to handle this at the data level by toggling the showComments value.

So, first, you need to know which row to modify:

<aura:iteration items="{!v.poLineWrapper}" var="wrap" indexVar="wrapperIndex">

And then store this information so the event can access it:

<lightning:button name="{!wrap}" label="Comments" variant="brand" 
     value="{!wrapperIndex}" onclick="{!c.openCommentsPanel}"/>

And then get the appropriate value and toggle it:

openCommentsPanel: function(component, event, helper) {
    var lineitems = component.get("v.poLineWrapper"),
        index = parseInt(event.target.value);
    lineitems[index].showComments = !lineitems[index].showComments;
}

After toggling the value, the rendering system will take care of showing the comments.

Also, please be careful when using components. For some reason, case-insensitive versions of a component will compile, but fail during runtime. Make sure you're using aura:if, and not aura:If (or any other capitalization).