在gridster.js中调整大小时更改内容

Question

我只是学习使用gridster，我想创建一个卡片显示常规信息，当用户选择展开卡片时，这将改变内容并显示产品的完整信息！

这是点击展开前的卡片

<ul>
    <li class="firm" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <div style="width: 95%; height: 80%; float: left; margin: 5px" id="divMain_1">
            <div id="headerCol" style="width: 100%; height: 15%">
                <span id="quankul">asset under management</span>
            </div>
            <div id="totalCol" style="width: 100%; height: 25%">
                <span class="bold secondDiv" style="font-size: 24px">$1.41 Billion</span> <span class="bold">
                    (total asset)</span>
            </div>
            <div class="secondDiv" style="width: 100%; height: 50%; float: left">
                <div style="float: left; width: 100%">
                    <div style="float: left; width: 70%">
                        <span class="bold">Top 3 Plan</span>
                    </div>
                    <div style="float: left; width: 30%">
                    </div>
                </div>
                <div style="float: left; width: 100%">
                    <div style="float: left; width: 70%">
                        <span>Seafood Gallery</span>
                    </div>
                    <div style="float: left; width: 30%">
                        <span>$100.000</span>
                    </div>
                </div>
                <div style="float: left; width: 100%">
                    <div style="float: left; width: 70%">
                        <span>ACME Enterprise</span>
                    </div>
                    <div style="float: left; width: 30%">
                        <span>$200.000</span>
                    </div>
                </div>
                <div style="float: left; width: 100%">
                    <div style="float: left; width: 70%">
                        <span>Ashley Cleaning</span>
                    </div>
                    <div style="float: left; width: 30%">
                        <span>$300.000</span>
                    </div>
                </div>

            </div>

        </div>
        <div id="expand" style="width: 100%;padding-bottom:0px; float: right;text-align:right">
         <span>Expand</span>
        </div> 
        <div id="collapse"  style="width: 100%;padding-bottom:10px;height:20%;text-align:right;display:none">
           <span>Collapse</span>
        </div>
    </li>

当我点击“展开”时，这将显示有关该产品的详细信息;

你可以帮助我做到这一点！