Morgan Ng Morgan Ng - 2 months ago 8
Javascript Question

Expand the height of css while onclick and close back using jQUERY

I trying to expand the height of the css to 200 when onclick to display the list of the bank and choose the bank icon however i wish to close back the height from css 200 to 102 when onclick the same button.

How do we do this ?



$('#moreBanking').click(function() {
$('.bank_list').css("height", "200px");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div name="bankDisplay2" class="bank_list_main">
<ul data-bind="foreach: thirdPayBank" class="bank_list" style="height: 102px;">
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="华夏银行" data-code="HXB" class="bank_17">
<a href="javascript:void(0)" class="bank"></a>
</li>

<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="福建兴业银行" data-code="CIB" class="bank_11">
<a href="javascript:void(0)" class="bank"></a>
</li>
</ul>
<span id="moreBanking">更多银行</span>
</div>

<span id="moreBanking">更多银行</span>
<< button




Answer

Instead of using inline styling for the initial height, I would toggle a class like:

JS Fiddle

CSS:

.bank_list {
    height: 102px;
 }
.tall {
    height: 200px;
}

Jquery:

$('#moreBanking').click(function(){
  $('.bank_list').toggleClass('tall'); // Will add/remove class on each click
});