Sorry if this is a dumb question but I'm very much stuck on this problem for about 4 days so far. So here it goes.

I have the Jevelin theme installed, which has a Portfolio. I've created my categories like this:

• Category A

  • category A.1
    • category A.1.1
    • category A.1.2

• Category B

  • category B.1

• Category C

  • category C.1

What I want to achieve is the following: First thing I should see on the page is the main categories: Category A, B, C. Once I click on one of the categories they disappear, and their child categories appear(let's say I click on A, then categories A,B,C disappear, and A.1 shows with it's related projects. When clicked on A.1, it disappears and A.1.1 and A.1.2 shows up with their related projects).

The problem here is that the categories are handled in a view.php file, which prints all the categories in spans, ignoring their tree structure, same as for all the projects.

The displaying is handled with javascript through the data-rel attribute by the categories slug. Whenever a category has a data-rel="category_a", show only projects with data rel="category_a".

Here is the block that prints out the categories:

$filter_category = ( $categories_order == 'desc' ) ? array_reverse( get_terms('fw-portfolio-category') ) : get_terms('fw-portfolio-category'); ?>
         <?php foreach( $filter_category as $cat ) : ?>
            <?php if( in_array( $cat->name, $categories_used ) ) : ?>
                <span class="sh-filter-item<?php echo ( isset( $cat_slug ) && $cat_slug == $cat->slug ) ? ' ' : ''; ?>" data-filter=".category-<?php echo esc_js( $cat->slug ); ?>" data-href="<?php echo esc_url( get_permalink( $post_id ) ); ?>?category=<?php echo esc_js( $cat->slug ); ?>">
                   <div class="sh-filter-item-content"><?php echo esc_attr( $cat->name ); ?></div>
                 </span>

Is there any possible way to achieve this only with Javascript with the same display:none/block logic? Or should I approach a different type of solutions.

I've tried creating a category page where I take the category ID with $_GET['id'] from the URL, find the categories with child_of => $_GET['id'], but another problem appears when a category has no more childs, it still goes to the category page and all the categories are gone.

Please help me make up my mind.