Чтобы увеличить высоту моего баннера

Question

Как увеличить высоту баннера при нажатии После повторного нажатия на него следует перейти в режим меньше.

Answer 1

Вы можете сделать .sqBandisplay:none; и использовать show() и hide() в JQuery, или использовать toggle().

$(document).ready(function(){ 
 
    $('.moreBan').click(function(){ 
 
    $('.sqBan').toggleClass('expand'); 
 
    }); 
 
});

.sqBan {height:50px;background:indianred;transition:height .3s linear;} 
 
.sqBan.expand {height:250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='moreBan'>Click</div> 
 
<div class='sqBan'>Some information here</div>

Answer 2

Определение класса CSS, который устанавливает большую высоту, а затем использовать toggleClass(), чтобы включить его и выключать. Попробуйте это:

$('.moreBan').click(function() { 
 
    $('.sqBan').toggleClass('large'); 
 
});

.sqBan { 
 
    background-color: #C00; 
 
} 
 
.large { 
 
    height: 100px; 
 
}

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

 
<div class="sqBan">sqBan...</div> 
 
<div class="moreBan">Click me</div>