widget should display post archive by year and on click also by month

I want to display the post archives like seen in this picture. Shown by year and on click it should open up the months. I am not sure how to approach this, would you customize the standard WordPress Archives Widget?

enter image description here

Solutions Collecting From Web of "widget should display post archive by year and on click also by month"

I did this for a client and it looked like this:

The PHP code:

<dl class="tree-accordion">
    <?php
    $currentyear = date("Y");
    $years = range($currentyear, 1950);
    foreach($years as $year) { ?>
        <dt><a href=""><i class="fa fa-fw fa-plus-square-o" aria-hidden="true"></i> <?php echo $year; ?></a></dt>
        <?php
        $archi = wp_get_archives('echo=0&show_post_count=1&type=monthly&year=' . $year);
        $archi = explode('</li>', $archi);
        $links = array();
        foreach($archi as $link) {
            $link = str_replace(array('<li>', "\n", "\t", "\s"), '' , $link);
            if('' != $link)
                $links[] = $link;
            else
                continue;
        }
        $fliplinks = array_reverse($links);
        if(!empty($fliplinks)) {
            echo '<dd>';
            foreach($fliplinks as $link) {
                echo '<span>' . $link . '</span>';
            }
            echo '</dd>';
        } else {
            echo '<dd class="tree-accordion-empty"></dd>';
        }
        ?>
    <?php } ?>
</dl>

The archives override filter:

/*
 * Add filter to query archives by year
 */
function newmarket_getarchives_filter($where, $args) {
    if(isset($args['year'])) {
        $where .= ' AND YEAR(post_date) = ' . intval($args['year']);
    }

    return $where;
}

add_filter('getarchives_where', 'newmarket_getarchives_filter', 10, 2);

The CSS code:

.tree-accordion {
    line-height: 1.5;
}
.tree-accordion dt, .tree-accordion dd {}
.tree-accordion dt a {
    display: block;
}
.tree-accordion .fa {
    color: #666666;
}
.tree-accordion dd a {}
.tree-accordion dd span {
    display: block;
}
.tree-accordion dd {
    margin: 0 0 0 20px;
}

The Javascript code:

jQuery(document).ready(function(){
    var allPanels = jQuery('.tree-accordion > dd').hide();

    jQuery('.tree-accordion > dt > a').click(function() {
        $target = jQuery(this).parent().next();

        if(!$target.hasClass('active')) {
            allPanels.removeClass('active').slideUp();
            $target.addClass('active').slideDown(100);
        }

        return false;
    });

    jQuery('.tree-accordion-empty').prev().hide();
});

The final result:

enter image description here

The “Archives” Widget makes use of wp_get_archives() which, given the correct arguments (specifically the format argument), can supply the markup you need. I’d say customizing that Widget is a good place to start.