Making taxonomy structure hierarchical for sub-filters?

This site for-sale.nl.testbyte.nl i am using taxonomies to filter the portfolio.

Does anybody know how to code the filter hierarchical so it can have sub-filters? So when you click a main Taxonomy the child-taxonomies pop out and then you can filter on the child taxonomies like this example. (hide and display the sub-filters).

Here is the code of the filter:

<ul id="filter" class="filter clearfix" data-option-key="filter">
            <li><a href="#" class="all" data-filter="*" ><?php _e('All', 'qs_framework'); ?></a></li>

            <?php
            // Get the taxonomy
            $terms = get_terms('filter');
            $count = count($terms);
            $i = 0;

            // test if the count has any categories
            if ($count > 0) {

                // break each of the categories into individual elements
                $term_list = '';
                foreach ($terms as $term) {

                    $i++;
                    $term_list .= '<li><a href="javascript:void(0)" data-filter=".' . $term->slug . '">' . $term->name . '</a></li>';

                    if ($count != $i) {
                        $term_list .= '';
                    } else {
                        $term_list .= '';
                    }
                }

                echo $term_list;
            }
            ?>
        </ul>