4

I am trying to implement some basic collapse/expand functionalities,for that, i need to read the class value of a div so i used the following code:

<ui:button class="button" label="hide" press="{!c.handleCollapseExpand}"/>

  <div class="slds-show" aura:id="CollapseExpand">
     ----- some content -----
  </div>

The controller side:

    handleCollapseExpand: function(cmp,event,helper){

    var isExapndable = cmp.find("CollapseExpand").get("v.class");
    console.log(isExapndable); // returns undefined --> should print out "slds-show"           
}

the console prints out "undefined", do you know how to get the class value in this context ?

2 Answers 2

10

There is $A.util hasClass function:

var isExpandable = $A.util.hasClass(cmp.find("CollapseExpand"), "slds-show");

that you can use to check if a specific class is present.

0
5

Use getElement() to get the JS element and then you can access it like you would any other JS object:

var component = cmp.find("CollapseExpand").getElement();
console.log(component.className);
2
  • I will try it right away but do you have an idea why my solution is not working as i prefer always to use native lightning functions over JavaScript functions as recommended by salesforce?
    – user28829
    Commented Mar 7, 2017 at 14:06
  • 3
    Your solution isn't working because the get() method on components only retrieves the component attributes (aura:attribute) exposed by a component. The HTML attributes on your DOM element aren't exposed that way, so get() won't retrieve them so you have to get the DOM element with JS to work with them. Commented Mar 7, 2017 at 14:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .