Keep toggled after refresh using jquery

I need some help in jquery. I am displaying categories from database, below each category i am displaying sub category from database, i want the tag to keep toggled after page reload. Plz help me with this.Below is my code Html/php and jquery. once i click on "+" sign beside category, it displays subcategory, but after refresh toggled state is not maintained, please edit my code so that toggle state remains after refresh

php file

<h1>Product Categories</h1> 
<ul>
    <?php

    $catres = mysql_query("SELECT * FROM categories");
    while($catrow = mysql_fetch_assoc($catres)){
   echo "<li><a href='" . CONFIG_BASEDIR. "products.php?id=". $catrow['id'] . "'>". $catrow['name'] . "</a>
              <b style='float:right' onclick ='showsubcat(".$catrow['id'].");'>+</b>
             </li>";

             $category_id = $catrow['id'];

              echo "<ul style='display:none' id='".$category_id."'>";
              $subcatres = mysql_query("SELECT * FROM subcategories WHERE cat_id = '$category_id' ");
                  while($subcatrow = mysql_fetch_assoc($subcatres)){
                    echo "<li><a href='" . CONFIG_BASEDIR. "products.php?id=" . $subcatrow['id'] . "'>". $subcatrow['name'] . "</a></li>";
                    }
              echo "</ul>";

            }
    ?>

jquery file

function showsubcat(category_id){
    $('#'+category_id).toggle();
}