CODEWITHSUNDEEP
javascriptjquerycss
Daniel Smith
Daniel Smith

Reputation: 1734

JQuery Expand and collapse Tree List

I'm new on jquery. I have a list with sub list. I want to apply expand/collapse function to all of them.

html:

<ul class="tree-child">
    <li class="link">
        <span><a href="#">folderrename</a></span>
        <ul>
            <li class="link">
                <span><a href="#">TR</a></span>
                <ul>
                    <li class="link">
                        <span><a href="#">Test</a></span>
                    </li>
                </ul>
            </li> 
            <li class="link">
                <span><a href="#">movefolder</a></span>
            </li>
            <li class="link">
                <span class=""><a href="#">Rel 7.60_SOLASE</a></span>
            </li>
            <li class="link">
                <span><a href="#">TestStdFolder1</a></span>
            </li>
        </ul>
    </li>
</ul>

I want to expand/collapse on <span><a href="#">folderrename</a></span> on click with + and - icon. For icon I use font awesome.

Reference Fiddle.

How to do this?

Upvotes: 1

Views: 3392

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could use slideToggle() :

$('#folder_rename').on('click',function(){
  $(this).next('ul').slideToggle();
})

Hope this helps.

$('span').on('click',function(){
  $(this).next('ul').slideToggle();
  $(this).find('i').toggleClass('fa-minus fa-plus');
})
span{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="tree-child">
  <li class="link">
    <span id='folder_rename'>
      <i class="fa fa-minus"></i>
      <a href="#">folderrename</a></span>
    <ul>
      <li class="link">
        <span><i class="fa fa-minus"></i><a href="#">TR</a></span>
        <ul>
          <li class="link">
            <span><a href="#">Test</a></span>
          </li>
        </ul>
      </li> 
      <li class="link">
        <span><a href="#">movefolder</a></span>
      </li>
      <li class="link">
        <span class=""><a href="#">Rel 7.60_SOLASE</a></span>
      </li>
      <li class="link">
        <span><a href="#">TestStdFolder1</a></span>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 2

Related Questions