How to toggle each <li> one by one?

Question

I have an HTMl which is like this:-

<li rel="leftmenu-root-add_section" class="accordion">
                <a href="javascript:void(0)">
                    <i class="fa fa-plus"></i><span style="font-size: 20px"><b>Add</b></span>
                </a>
            </li>
            <div class="panel"><ul class="test">
                    <li rel="leftmenu-root-add_post">
                        <a href="<?php echo base_url();?>admin/post/add_post">
                            <i class="fa fa-pencil"></i> <span>Post</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_announcement">
                        <a href="<?php echo base_url();?>admin/announcement/add_announcement">
                            <i class="fa fa-volume-up"></i> <span>Announcement</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_page">
                        <a href="<?php echo base_url();?>admin/page/add_page">
                            <i class="fa fa-file-o"></i> <span>Pages</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_tag">
                        <a href="<?php echo base_url();?>admin/tag/add_tag">
                            <i class="fa fa-tags"></i> <span>Tag</span>
                        </a>
                    </li>

               </ul>
               </div>

I want to click on "accordion", and each of the menu under the <div class="panel"><ul class="test"> get hidden.

I tried with this code, but something is going wrong.

$('.accordion').on('click',function(){
            var ulist = $(this).closest('div').find('ul');
            alert(ulist.attr('class'));
            alert('Hii');
        });

EDIT:-

The given suggesstion are fantastic in this question. However, there are something more I would like to request.

The div is getting hide and visible. I want to take sometransition time more like the SlideUp & SildeDown function of jQuery.

However, instead of hiding the total div or all the <li>s at once, I would like one li to get hide, wait for some fraction of time and then hide the next.

Answer 1

You can do it like this:

$(function() {
  $('.accordion').on('click', function() {
   var ulist = $(this).next('.panel').find("ul.test");
   ulist.toggle();
  });
});

See it working in the fiddle.

The explanation is that you need to do the event binding after the DOM loads, so you need to put your code inside a $(funciton(){.... It's like a $("document").ready();

Then, inside your event binding, you select the next .panel to the .accordion you've clicked. And once you have it, you search for the ul.test that you want to hide. Made this, you call toggle so each time you click on the element it will show/hide the ul.

EDIT

If you want that efect you should pic each li and hide one by one adding a delay. Like this:

$(function() {
  $('.accordion').on('click', function() {
     var ulist = $(this).next('.panel').find("ul.test li");
     var count = 0;
     var delay = 300;

     $.each(ulist, function(){
        $(this).delay(delay*count).fadeToggle();
        count++;
     });
  });
});

Answer 2

Try this snippet.

Edit 1 To hide the li one by one.

Used slideToggle as per your requirement.

$('.accordion').on('click',function(){
   //Get all li
   var liVar = $(this).next('div.panel').children('ul').find('li');
   //Call function for interval
   callFunction(liVar);
});
var interval;
//Function for interval to hide one by one
function callFunction(liVar){
  var temp=0;  
  interval = window.setInterval(function(){
     //Clear interval
     if(temp >= liVar.length)
     {
       clearInterval(interval);
     }
     liVar.eq(temp).slideToggle(1000);
     temp += 1;
   }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li rel="leftmenu-root-add_section" class="accordion">
                <a href="javascript:void(0)">
                    <i class="fa fa-plus"></i><span style="font-size: 20px"><b>Add</b></span>
                </a>
            </li>
            <div class="panel"><ul class="test">
                    <li rel="leftmenu-root-add_post">
                        <a href="javascript:void(0)">
                            <i class="fa fa-pencil"></i> <span>Post</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_announcement">
                        <a href="javascript:void(0)">
                            <i class="fa fa-volume-up"></i> <span>Announcement</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_page">
                        <a href="javascript:void(0)">
                            <i class="fa fa-file-o"></i> <span>Pages</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_tag">
                        <a href="javascript:void(0)">
                            <i class="fa fa-tags"></i> <span>Tag</span>
                        </a>
                    </li>

               </ul>
               </div>
<li rel="leftmenu-root-add_section" class="accordion">
                <a href="javascript:void(0)">
                    <i class="fa fa-plus"></i><span style="font-size: 20px"><b>Edit</b></span>
                </a>
            </li>
            <div class="panel"><ul class="test">
                    <li rel="leftmenu-root-add_post">
                        <a href="javascript:void(0)">
                            <i class="fa fa-pencil"></i> <span>Post</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_announcement">
                        <a href="javascript:void(0)">
                            <i class="fa fa-volume-up"></i> <span>Announcement</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_page">
                        <a href="javascript:void(0)">
                            <i class="fa fa-file-o"></i> <span>Pages</span>
                        </a>
                    </li>
                    <li rel="leftmenu-root-add_tag">
                        <a href="javascript:void(0)">
                            <i class="fa fa-tags"></i> <span>Tag</span>
                        </a>
                    </li>

               </ul>
               </div>

Answer 3

$('.accordion').on('click',function(){
   $(this).siblings('div').find('ul').toggle();
});