change content when resize in gridster.js - gridster

Question

i just learn to using gridster, and i want to create a card show general infomation and when user select expand the card, this wil change content and show full infomation off the product!
this is the card before click expand
<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>
and when i click "expand" this will show ful infomation about the product;
can you help me to do it!