Смотрел урок по jQuery и там был пример с увеличением content-box по клику. Потом я решил сделать и на второй клик по примеру toggle (что бы content-box принял старые размеры если кликнуть по нему второй раз). Но придумал только вариант с добавлением переменной. Это правильно ? или есть более хорошее решение ?
$(document).ready(function () {
var one = 1;
$(".content-box").click(function() {
if(one == 1){
one = 2;
$(".content-box").animate({
width: '500px',
height: '300px'
}, 1000);
$(".content-after").show().animate({
opacity: 1
});
}else if(one == 2){
one = 1;
$(".content-box").animate({
width: '240px',
height: '70px'
}, 500);
$(".content-after").hide().animate({
opacity: 0
});
}
});
});
html, body, ul, li {
margin: 5px;
padding: 5px;
}
.content-box {
width: 240px;
height: 70px;
background: dodgerblue;
padding: 15px;
border-radius: 8px;
}
.content-before {
font-size: 24px;
text-align: center;
}
.content-after {
display: none;
font-size: 18px;
opacity: 0;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
<p class="content-before">Click me to show more !</p>
<p class="content-after">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem?
Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione!
</p>
</div>