Wordpress - Make widgets inside widget area collapse for the Front-end user

functions.php

<?php
/**
 * Title: Widgets collapse for Front-end user
 * Author Mattias Ghodsian
 * Description: Make widgets inside widget area collapse for the Front-end user
 * Donate a cup of coffee: https://www.buymeacoffee.com/mattiasghodsian
 * Donate Eth: 	0xBBB96204E45D11C9799c6B12E6eE6F0d4A071Ef5
 **/

// register widget area
function mg_widgets_init() 
{
  register_sidebar( array(
    'name'          => 'Blog Post',
    'id'            => 'blog-post',
    'before_widget' => '<div class="col-widget" id="%1$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<div class="col-widget-title">',
    'after_title'   => '</div>',
  ) );
}
add_action( 'widgets_init', 'mg_widgets_init' );
?>

sidebar.js

/**
 * Title: Widgets collapse for Front-end user
 * Author Mattias Ghodsian
 * Description: Make widgets inside widget area collapse for the Front-end user
 * Donate a cup of coffee: https://www.buymeacoffee.com/mattiasghodsian
 * Donate Eth: 	0xBBB96204E45D11C9799c6B12E6eE6F0d4A071Ef5
 **/
jQuery(document).ready(function($) {
    /************** Sidebar - auto hide **************/
    if ( $('#blogSidebar').length ) {
        $('#blogSidebar .col-widget-title').each(function(i, obj) {
            var nextElem = $(this).next();
            // add overflow hidden to nextElement
            nextElem.css('overflow', "hidden");
            // Store the elements height as HTML ATTR
            nextElem.attr('ht', $(nextElem).height());
            // hide the element
            nextElem.animate({
                height: ( $(this).height() - $(this).height() )
            }, 500);
        });
    }

    /************** Sidebar - on click ***************/
    $('#blogSidebar .col-widget-title').on('click', function(event) {
        // get next element
        var nextElem = $(this).next();
        var thisElem = $(this).height();
        // where the magic happens
        if ( nextElem.height() == 0) {
            // add overflow hidden to nextElement
            nextElem.css('overflow', "visible");
            // show element
            nextElem.animate({
                height: nextElem.attr('ht')
            }, 500);
        }else{
            // add overflow hidden to nextElement
            nextElem.css('overflow', "hidden");
            // Store the elements height as HTML ATTR
            nextElem.attr('ht', nextElem.height());
            // hide the element
            nextElem.animate({
                height: (thisElem - thisElem)
            }, 500);
        }
    });
});

template-file.php

/**
 * Title: Widgets collapse for Front-end user
 * Author Mattias Ghodsian
 * Description: Make widgets inside widget area collapse for the Front-end user
 * Donate a cup of coffee: https://www.buymeacoffee.com/mattiasghodsian
 * Donate Eth: 	0xBBB96204E45D11C9799c6B12E6eE6F0d4A071Ef5
 **/
<div id="blogSidebar">
    <?php if ( is_active_sidebar( 'blog-post' ) ) : ?>
      <div class="row">
        <?php dynamic_sidebar( 'blog-post' ); ?>
      </div>
    <?php endif; ?>
</div>	

Preview