Display Child Categories On Click

On my wordpress website I have a menu that displays the subcategories for each categorie. What I want to do is to hide the subcategories by default and display them only when I cli

Solution 1:

Use Css to hide them:-

ul.children{
  display:none;
}

And then use jQuery to open them:-

jQuery('li.cat-item').on('click',function(){
   $('ul.children').hide();
   $(this).find('ul.children').show();
});

Solution 2:

Use This Css as below

 <style>     
ul.children{display:none}
</style>

In Javascript:

<script type="text/javascript">
$('.cat-item').click(function()
{
    if($(this).find('ul.children'))
    {
        $(this).find('ul.children').toggle();
    }
});
</script>