I wrote this Javascript snippet for a Polymer fronted, it works without issues.
The only thing that it accomplishes is changing an icon's orientation whenever a user is clicking on any expandable-item (expandable-item is a specific Tag name).
Imagine a classic Operating System's folder tree display and the + or - icon that shows if a specific folder is expandable or not.
When the user clicks, the clicked expandable-item tag receives the expanded attribute.
The user can click on several expandable-item and all of them must remain opened or closed according to the user clicks and, clearly, also the icons related to the items must change accordingly.
Are there any ways that you could suggest to make it more efficient and/or shorter?
var expandedItems = this.shadowRoot.querySelectorAll('expandable-item');
for (var i = 0; i < expandedItems.length; ++i) {
if (expandedItems[i].hasAttribute("expanded")){
expandedItems[i].getElementsByClassName("expandable-icon")[0].setAttribute("icon", "arrow:chevron-open-down");
} else {
expandedItems[i].getElementsByClassName("expandable-icon")[0].setAttribute("icon", "arrow:chevron-open-right");
}
}
Thanks for your suggestions.
expandable-item
a tag name and/or a class name? If you are able to include sample HTML that might be helpful. Also, when does the JavaScript above get run? \$\endgroup\$expandable-item
being a class name, tag name or both... \$\endgroup\$