function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jasper WallJasper 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
 
<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