In Gridstack, how to maximize and minimize button on widget?

Question

I have put two button on every widget like 'Maximize' and 'Minimize in' in widget header section. I want a functionality like when I click on minimize button, my widget will minimized and all other widget will rearrange to new position accordingly and when I click on maximize button that widget will take height same as original widget height and all other widget set to new position accordingly.

$(function() {

var options = {
         // cell_height: 150,
          vertical_margin:15,
          //width: 3
        };
    $('.grid-stack').gridstack(options);



    $('body').on('click', '.minimize-link', function() { 

        //alert("vbvbv");
         $(this).toggleClass("minimize-link").toggleClass("maximize-link");
         $(this).text("maximize");

        $(this).closest(".grid-stack-item").find(".portlet-content").css("display", "none");
   $(this).closest(".grid-stack-item").attr("data-gs-height", "1");


    });


    $('body').on('click', '.maximize-link', function() { 

        //alert("vbvbv");
         $(this).toggleClass("maximize-link").toggleClass("minimize-link");
         $(this).text("miniimize");

        $(this).closest(".grid-stack-item").find(".portlet-content").css("display", "none");
        $(this).closest(".grid-stack-item").attr("data-gs-height", "4");



    });

});

JSFiddle - link