Jquery multiple accordion menu
<p>i am create accordion menu.In that i have two filters.Ex: test 1 and test 2.Each have more then two parents like this</p>

<p>Menu 1</p>

<p>info 1
->test 1
->test2
info 2
->test1
->test2</p>

<p>Menu 2</p>

<p>info 1
->test 1
->test2
info 2
->test1
->test2</p>

<p>On page load,Menu 1 and menu 2 first level open by default.parent only (info1 and info 2 only in both menus).if we click info 1 of menu 1 its display child of info 1 others automatically hide.i try following code but i am not getting my expected output.here i enclosed by code .any guide me do this.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;!-- saved from url=(0073)http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php --&gt;
&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;jQuery Accordion Example&lt;/title&gt;

    &lt;style type="text/css"&gt;
        /* A few IE bug fixes */
        * { margin: 0; padding: 0; }
        * html ul ul li a { height: 100%; }
        * html ul li a { height: 100%; }
        * html ul ul li { margin-bottom: -1px; }

        body { padding-left: 10em; font-family: Arial, Helvetica, sans-serif; }
        #theMenu { width: 200px; height: 350px; margin: 30px 0; padding: 0; }

        /* Some list and link styling */
        ul li { width: 200px; }
        ul ul li { border-left: 25px solid #69c; padding: 0; width: 175px; margin-bottom: 0; }
        ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
        ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
        /* For the xtra menu */
        ul ul ul li { border-left: none; border-bottom: 1px solid #eee; padding: 0; width: 175px; margin-bottom: 0; }
        ul ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
        ul ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }


        li { list-style-type: none; }
        h2 { margin-top: 1.5em; }

        /* Header links styling */
        h3.head a { 
        color: #333;
        display:block; 
        border-top: 1px solid #36a;
        border-right: 1px solid #36a;
        background: #ddd url(down.gif) no-repeat; 
        background-position: 98% 50%;
        padding: 3px 6px;
        }
        h3.head a:hover { 
        color: #000;
        background: #ccc url(down.gif) no-repeat; 
        background-position: 98% 50%;
        }
        h3.selected a { 
        background: #69c url(up.gif) no-repeat; 
        background-position:98% 50%;
        color: #fff;
        padding: 3px 6px;
        }
        h3.selected a:hover { 
        background: #69c url(up.gif) no-repeat; 
        background-position:98% 50%;
        color: #36a;
        }

        /* Xtra Header links styling */
        h4.head a { 
        color: #333;
        display:block; 
        border-top: 1px solid #36a;
        border-right: 1px solid #36a;
        background: #eee url(down.gif) no-repeat; 
        background-position: 98% 50%;
        padding: 3px 6px;
        }
        h4.head a:hover { 
        color: #000;
        background: #ddd url(down.gif) no-repeat; 
        background-position: 98% 50%;
        }
        h4.selected a { 
        background: #6c9 url(up.gif) no-repeat; 
        background-position:98% 50%;
        color: #fff;
        padding: 3px 6px;
        }
        h4.selected a:hover { 
        background: #6c9 url(up.gif) no-repeat; 
        background-position:98% 50%;
        color: #36a;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;      
&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="accordion.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
jQuery().ready(function(){  
    // applying the settings
    jQuery('#theMenu').Accordion({
        active: 'h3.selected',
        header: 'h3.head',
        alwaysOpen: false,
        animated: true,
        showSpeed: 400,
        hideSpeed: 800
    });
    jQuery('#xtraMenu').Accordion({
        active: 'h4.selected',
        header: 'h4.head',
        alwaysOpen: false,
        animated: true,
        showSpeed: 400,
        hideSpeed: 800
    });
}); 
&lt;/script&gt;
&lt;ul id="theMenu"&gt;
    &lt;li style="position: static; "&gt;
        &lt;h3 class="head selected"&gt;&lt;a href="javascript:;"&gt;Title 1&lt;/a&gt;&lt;/h3&gt;
            &lt;ul style="display: block; "&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 1 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 1 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 1 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li style="position: static; "&gt;
        &lt;h3 class="head selected"&gt;&lt;a href="javascript:;"&gt;Title 2&lt;/a&gt;&lt;/h3&gt;
            &lt;ul style="display:block; "&gt;
                &lt;li&gt;
                    &lt;ul id="xtraMenu"&gt;
                        &lt;li style="position: static; "&gt;
                            &lt;h4 class="head"&gt;&lt;a href="javascript:;"&gt;Content xtra 2 1a&lt;/a&gt;&lt;/h4&gt;
                                &lt;ul style="display: none; "&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Content 2 1 1&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Content 2 1 2&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Content 2 1 3&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li style="position: static; "&gt;
                            &lt;h4 class="head "&gt;&lt;a href="javascript:;"&gt;Content xtra 2 1b&lt;/a&gt;&lt;/h4&gt;
                                &lt;ul style="display: none; "&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Content 2 2 1&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Content 2 2 2&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Content 2 2 3&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 2 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 2 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li&gt;
        &lt;h3 class="head selected"&gt;&lt;a href="javascript:;"&gt;Title 3&lt;/a&gt;&lt;/h3&gt;
            &lt;ul style="display:block; "&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 3 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 3 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 3 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li&gt;
        &lt;h3 class="head selected"&gt;&lt;a href="javascript:;"&gt;Title 4&lt;/a&gt;&lt;/h3&gt;
            &lt;ul style="display: block; "&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 4 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 4 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 4 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li&gt;
        &lt;h3 class="head selected"&gt;&lt;a href="javascript:;"&gt;Title 5&lt;/a&gt;&lt;/h3&gt;
            &lt;ul style="display:block; "&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 5 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 5 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Content 5 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
