Hey guys...!

I kindda bit confused here.

I have this list showned;

<!-- div kiri started -->

                        <div id="kiri">

                            <!-- ordered ul started -->

                            <ul >Management Setup

                                <li id="supplier">Supplier</li>

                                <li id="customer">Customer</li>

                                <li id="staff">Staff</li>

                                <li id="bank">Bank</li>

                                <li id="stock">Stock</li>

                            </ul> <!-- ordered ul ended -->

                        </div>

                        <!-- div kiri ended --> 

ok, and then I have this css;

      ul {

                background-image: url(images/closed.png);

                background-position: 0 1px;

                background-repeat: no-repeat;

                margin: 0;

                padding-left: 20px;

            }

            li {

                list-style: circle;

            } 

And then... I have this jquery....

// the tree clickable

    $('ul').click(function(index){

        $(this).css('background-image','images/opened.png');

      // put more tasks here

    }); 

Well, ya... the purpose of that RED marking is to make the ul element expanding its child li element.

By firstly; Change its background image,

and then secondly expand the li element.

And if it's clicked again, it will removed... and so on and so forth... 

I tried to use  this tutorials but lead me into unworking thing. 

Is there any part that I forgot?