slide down accordion list that remembers its state if open or close
<p>HTML</p>

<pre><code>&lt;div style="border:1px solid red;width:200px;"&gt;
&lt;div class="wpsc_categorisation_group"&gt;
    &lt;ul class="wpsc_categories wpsc_top_level_categories"&gt;
        &lt;li&gt;&lt;a href="link1"&gt;main link 1&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a&gt;test 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;test 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;test 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="clear_category_group"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wpsc_categorisation_group"&gt;
    &lt;ul class="wpsc_categories wpsc_top_level_categories"&gt;
        &lt;li&gt;&lt;a href="link2"&gt;main link 2&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a&gt;test 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;test 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a&gt;test 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="clear_category_group"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>div.wpsc_categorisation_group ul li {position:relative;}
div.wpsc_categorisation_group ul li ul {display:none;}

ul.wpsc_top_level_categories {padding-bottom:0 !important;}
ul.wpsc_top_level_categories li {}
ul.wpsc_top_level_categories li:hover {cursor:pointer;}
ul.wpsc_top_level_categories li ul li a span {background:none !important;}
span.collapse-arrow {background:red;width:10px;height:9px;float:right;margin-top:5px;}
</code></pre>

<p>Javascript</p>

<pre><code>jQuery('div.wpsc_categorisation_group ul li ul').slideUp().hide();
jQuery('div.wpsc_categorisation_group ul li').click(function() {
jQuery(this).parent().find('ul').slideToggle();
    });
jQuery('div.wpsc_categorisation_group ul li a').append('&lt;span class="collapse-arrow"&gt;&amp;nbsp;&lt;/span&gt;');
</code></pre>

<p>this is My jsfidlle <a href="http://jsfiddle.net/vs9nc/" rel="nofollow">sample</a></p>

<p>I really need help on this one...</p>

<ol>
<li>I need the red box only to be clickable and subs will slidedown</li>
<li>and also need it to remember if user opens it or closes it, so when changing page it will remember its state</li>
<li>and also HTML should not be altered because i'm editing in wpsc widget</li>
</ol>

<p>I really appreciate any help I can get... :-(</p>
