Best way to check if an item is expanded

3 posts, 1 answers
  1. Jeff
    Jeff avatar
    14 posts
    Member since:
    May 2013

    Posted 23 Jul 2013 Link to this post


    I was wondering what is considered the "best" way to determine if a PanelBarItem is expanded or not? So far what I've been able to come up with is to check the "aria-expanded" property or see if the child <ul> is visible, both of which feel a bit dirty. Is there a better way, or is one of these two methods considered "better" than the other?

    For context, I'm retrieving the item to check by using jquery.closest from one of the child items. Example:
    function (id) {
      var child = $("#s-list-objectChild-" + id);
      var parent = child.closest("[id^='s-list-object-']");
      if (parent.isExpanded()) // Perform check here
  2. Answer
    Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 26 Jul 2013 Link to this post

    Hi Jeff,

    There's currently no integrated easy way to do that. I think it will be easiest for you to use the CSS class .k-state-active to determine if the item is expanded. Check this jsBin for a quick example.

    Kamen Bundev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jeff
    Jeff avatar
    14 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

    Yeah, I figured there was no real easy way, but thanks for your input.

    Edit: Actually, I have to use the "aria-expanded" attribute in my code. Since my PanelBar's expand mode is set to "single," the first item is already expanded on load. This causes the "k-state-active" class to be applied, even though the action associated with expanding that item may not have been fired yet. Luckily (and somewhat incorrectly), the "aria-expanded" attribute does not change to true if the item starts out expanded.
Back to Top