0

I am following the tutorial given in: https://www.lightningdesignsystem.com/components/trees/#flavor-base

I used this code:

          <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>

I found a link here, but I am not sure how to achieve collapse and expanding on the tree. please help me.

Update:#1

                <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
                    <head>
                        <meta charset="utf-8" />
                        <meta http-equiv="x-ua-compatible" content="ie=edge" />
                        <title>tree demo</title>
                        <meta name="viewport" content="width=device-width, initial-scale=1" />

                        <apex:stylesheet value="{!URLFOR($Resource.SLDS221, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
                        <style type="text/css">

                        </style>
                    </head>


                    <body>    

                        <!-- REQUIRED SLDS WRAPPER -->


                        <div class="jasperwall">                  

                            <div class="slds-grid slds-wrap"> 
                                <div class="slds-col slds-dividers-right slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-6">                        
                                    <!-- begin of tree -->
                                    <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" aria-expanded="false"> 
                                                <div class="slds-tree__item">                                       
                                                    <button class="slds-button slds-button--icon slds-m-right--x-small" aria-controls="tree0-node0-0" title="Toggle">
                                                        <svg  class="slds-button__icon slds-button__icon--small" aria-hidden="false">
                                                            <use xlink:href="{!URLFOR($Resource.SLDS221,'/assets/icons/utility-sprite/svg/symbols.svg#chevronright')}"></use>
                                                        </svg>
                                                        <span class="slds-assistive-text">Toggle</span>
                                                    </button><a id="tree0-node0__label" style="text-decoration:none" href="javascript:void(0);" tabindex="-1" role="presentation" class="slds-truncate" title="Tree Branch">Domain</a>
                                                </div>

                                                <ul class="slds-is-expanded" id="tree0-node0-ul" role="group" aria-labelledby="tree0-node1__label">
                                                    <li id="tree0-node0-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="" aria-controls="tree0-node1-0" title="Toggle">
                                                                <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
                                                                    <use xlink:href="{!URLFOR($Resource.SLDS221,'/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>-->
                                                            <!-- begin form -->
                                                            <div class="slds-form--stacked">


                                                                <fieldset class="slds-form-element">
                                                                    <legend class="slds-form-element__legend slds-form-element__label"></legend>
                                                                    <div class="slds-form-element__control">
                                                                        <label class="slds-checkbox" for="opportunities-ownership">
                                                                            <input type="checkbox" name="default" id="opportunities-ownership" />
                                                                            <span class="slds-checkbox--faux"></span>
                                                                            <span class="slds-form-element__label">Computer Networks</span>
                                                                        </label>
                                                                        <label class="slds-checkbox" for="contact-ownership">
                                                                            <input type="checkbox" name="default" id="contact-ownership" />
                                                                            <span class="slds-checkbox--faux"></span>
                                                                            <span class="slds-form-element__label">Database Mining</span>
                                                                        </label>
                                                                    </div>
                                                                </fieldset>

                                                                <div class="slds-form-element">
                                                                    <div class="slds-form-element__control">
                                                                        <button class="slds-button slds-button--brand">Apply Refinements</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- end of form -->
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>                                            
                                        </ul>
                                    </div>
                                    <!-- end of tree -->

                                </div>  

                            </div>

                        </div>
                        <!-- / FOOTER -->

                        <!-- / REQUIRED SLDS WRAPPER --> 
                        <!-- JAVASCRIPT -->

                        <!-- / JAVASCRIPT -->

                    </body>
                </html>
            </apex:page>
2
  • First Q would be to check if you are loading SLDS properly? So please provide the complete code of your component if possible so we can help faster and eliminate common issues.
    – Richard N
    Feb 7 '17 at 8:52
  • please check the update, i have given the complete code of my vf page Feb 7 '17 at 8:58
0

This jQuery code solved my problem

    $(document).ready(function(){
            $("#tree0-node0").click(function(){  
                if($("#tree0-node0-ul").attr('class')=="slds-is-expanded"){
                    $("#tree0-node0-ul").removeClass("slds-is-expanded");                    
                    $("#tree0-node0-ul").addClass("slds-is-collapsed");                   
                    $("#tree0-node0").attr('aria-expanded',false);
                }else{                        
                    $("#tree0-node0-ul").removeClass("slds-is-collapsed");                    
                    $("#tree0-node0-ul").addClass("slds-is-expanded");                  
                    $("#tree0-node0").attr('aria-expanded',true);
                }                    
            });               
        });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.