Question

I would like to expand and collapse the nodes when i click +/- symbols and also when i click the text (hyperlink) next to each symbol. I want to collapse the previous node and expand the node which i clicked. I am using the following method.

$(document).ready(function(){

    // first example
    $("#navigation").treeview({
        persist: "cookie", //I want to store the state and come back to the state when i reload the page.
        collapsed: true, //I want to collapse all the nodes when i load.
        unique:true //I want to open only one node at a time
    });
});

I have tried lot of options but none of them worked. Please help me.

My HTML is:

 <ul id="navigation" class="treeview">
            <li>
                <div>
                    <a href="#">Marketing</a>
                </div>
                <ul>
                    <li>
                        <div>
                            <a href="#">Joysticks</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <a href="#">Intel</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Microsoft</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Sony</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <a href="#">Laptops</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <a href="#">Apple</a>
                                </div>
                                <ul>
                                    <li>
                                        <div>
                                            <a href="#">iMac</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">MacBook Air</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">MacBook Pro</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">Accessories</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Dell</a>
                                </div>
                                <ul>
                                    <li>
                                        <div>
                                            <a href="#">Inspiron</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">XPS</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Sony</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <a href="#">Phones</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <a href="#">LG</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Motorola</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Samsung</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

Answer 1

You’re code behind generates <div><a href="#">Marketing</a></div>. Apparently, there is something wrong with having two levels of tags. Change the structure to just <span>Marketing</span> and it will work. My guess is that you could use <a> or <div> if you prefer.

I’ve made those changes here and it works:
http://jsfiddle.net/lbstr/V7A6A/2/