How to keep the toggle content open even after page reload?
<p>I use a jquery to toggle an <code>ul</code> when <code>li</code> is clicked. I happens as I expect. But as I have given a anchor <code>a</code> tag for <code>li</code> when the <code>li</code> is clicked It reloads and opens the <code>url</code> mentioned in the anchor tag. So the <code>ul</code> which was opened using <code>toggle</code> is getting closed automatically.</p>

<p>My jquery snippet is:</p>

<pre><code>    &lt;script&gt;  
var $j = jQuery.noConflict();
$j(function() {
  $j('li.level1').click(function() { 
    $j('ul.level1:visible').hide();
    $j('ul.level1', this).toggle();
  });

});
&lt;/script&gt;
</code></pre>

<p>My html is:</p>

<pre><code>    &lt;ul class="level0"&gt;
&lt;li class="level1"&gt;
  &lt;a href="#"&gt;Toggle&lt;/a&gt;
  &lt;ul class="level1" style="display:none;"&gt;
  &lt;li class="level2"&gt;&lt;a href="http://127.0.0.1/magento_1.9.2.4/collection/shop-by-collection.html"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="level2"&gt;&lt;a href="http://127.0.0.1/magento_1.9.2.4/collection/shop-by-feature.html"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="level2"&gt;&lt;a href="http://127.0.0.1/magento_1.9.2.4/collection/shop-all.html"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li class="level1"&gt;
  &lt;a href="#"&gt;Toggle&lt;/a&gt;
  &lt;ul class="level1" style="display:none;"&gt;
  &lt;li class="level2"&gt;&lt;a href="#"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="level2"&gt;&lt;a href="#"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="level2"&gt;&lt;a href="#"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;li class="level1"&gt;
  &lt;a href="#"&gt;Toggle&lt;/a&gt;
  &lt;ul class="level1" style="display:none;"&gt;
  &lt;li class="level2"&gt;&lt;a href="#"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="level2"&gt;&lt;a href="#"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="level2"&gt;&lt;a href="#"&gt;Level2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Below is actually my phtml from where the html is generated:</p>

<pre><code>    &lt;ul class="level0"&gt;
&lt;?php foreach ($cats as $cat): ?&gt;
 &lt;li class="level1"&gt;
&lt;a href= "&lt;?php echo $_helper-&gt;getCategoryUrl($cat) ?&gt;" &gt;
  &lt;?php echo $cat-&gt;getName() ?&gt; 
  &lt;/a&gt;
  &lt;?php $_category = Mage::getModel('catalog/category')-&gt;load($cat-&gt;getId()) ?&gt;
                &lt;?php $_subcategories = $_category-&gt;getChildrenCategories() ?&gt;
                &lt;?php if (count($_subcategories) &gt; 0): ?&gt;

                    &lt;ul class="level1" style="display:none;"&gt;
                        &lt;?php foreach($_subcategories as $_subcategory): ?&gt;
                            &lt;li class="level2"&gt;
                                &lt;a href="&lt;?php echo $_helper-&gt;getCategoryUrl($_subcategory) ?&gt;"&gt;
                                    &lt;?php echo $_subcategory-&gt;getName() ?&gt;
                                &lt;/a&gt;
                            &lt;/li&gt;
                        &lt;?php endforeach; ?&gt;
                    &lt;/ul&gt;

                &lt;?php endif; ?&gt;
&lt;/li&gt;

&lt;?php endforeach; ?&gt;
&lt;/ul&gt;
</code></pre>

<p>I want to keep the <code>ul</code> of selected <code>li</code> to be kept open even when the page is reloaded or refreshed.</p>