Morgan Ng Morgan Ng - 1 year ago 73
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=""></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 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>
<span id="moreBanking">更多银行</span>

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

Answer Source

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

JS Fiddle


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


  $('.bank_list').toggleClass('tall'); // Will add/remove class on each click
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download