You need to sign in to do that
Don't have an account?
Jasper Wall
Trees interactions of Lightning design system not working in VF page
I am following the tutorial given in
https://www.lightningdesignsystem.com/components/trees/#flavor-base
I used the code like this my page
Even i have included SLDS in my css list as follows,
The code just displaying trees and those are neither collapsing nor expanding, please help me
https://www.lightningdesignsystem.com/components/trees/#flavor-base
I used the code like this my page
<div class="slds-tree_container" role="application"> <h4 class="slds-text-title--caps" id="treeheading">Tree Group Header</h4> <ul class="slds-tree" role="tree" aria-labelledby="treeheading"> <li id="tree0-node0" role="treeitem" aria-level="1"> <div class="slds-tree__item"> <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle"> <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use> </svg> <span class="slds-assistive-text">Toggle</span> </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div> </li> <li id="tree0-node1" role="treeitem" aria-level="1" aria-expanded="false"> <div class="slds-tree__item"> <button class="slds-button slds-button--icon slds-m-right--x-small" aria-controls="tree0-node1" title="Toggle"> <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use> </svg> <span class="slds-assistive-text">Toggle</span> </button><a id="tree0-node1__label" href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Branch">Tree Branch</a></div> <ul class="slds-is-collapsed" role="group" aria-labelledby="tree0-node1__label"> <li id="tree0-node1-0" role="treeitem" aria-level="2"> <div class="slds-tree__item"> <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle"> <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use> </svg> <span class="slds-assistive-text">Toggle</span> </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div> </li> </ul> </li> <li id="tree0-node2" role="treeitem" aria-level="1"> <div class="slds-tree__item"> <button class="slds-button slds-button--icon slds-m-right--x-small" aria-controls="tree0-node2" title="Toggle"> <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use> </svg> <span class="slds-assistive-text">Toggle</span> </button><a id="tree0-node2__label" href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Branch">Tree Branch</a></div> <ul class="slds-is-collapsed" role="group" aria-labelledby="tree0-node2__label"> <li id="tree0-node2-0" role="treeitem" aria-level="2"> <div class="slds-tree__item"> <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle"> <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use> </svg> <span class="slds-assistive-text">Toggle</span> </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div> </li> </ul> </li> <li id="tree0-node3" role="treeitem" aria-level="1"> <div class="slds-tree__item"> <button class="slds-button slds-button--icon slds-m-right--x-small slds-is-disabled" disabled="" title="Toggle"> <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevronright"></use> </svg> <span class="slds-assistive-text">Toggle</span> </button><a href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Item">Tree Item</a></div> </li> </ul> </div>
Even i have included SLDS in my css list as follows,
<apex:stylesheet value="{!URLFOR($Resource.SLDS221, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
The code just displaying trees and those are neither collapsing nor expanding, please help me