How to toggle ul class when anchor tag is clicked using jquery?

I want to keep a toggle function for ul li a. In magento I used the below coding to fetch level 1 and level 2 subcategories in layered navigation:

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

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

                <?php endif; ?>
</li>

<?php endforeach; ?>
</ul>

I want to toggle and display the ul.level1 when the a anchor tag of level1 is clicked.SO I used the jquery below:

   <script>  
var $j = jQuery.noConflict();
$j(function() {
  $j('li.level1 a').click(function() {

    $j('ul.level1:visible').hide();
    $j('ul.level1', this).toggle();
  });

});
</script>

But it is not displaying the ul.level1 when a is clicked. It is toggling when li.level1 is clicked. Why is this happening an help me to resolve this isuue please.