Нужно повесить toggle событие на элемент, который будет изменять ширину блока. То больше будет его делать, то меньше.
$(document).on('click', '.title', function() {
if (('.content_review .review_item').width() = 200) {
$('.content_review .review_item').animate({
width: '400'
}, {
duration: 500,
specialEasing: {
width: 'linear'
}
});
} else {
$('.content_review .review_item').animate({
width: '200'
}, {
duration: 500,
specialEasing: {
width: 'linear'
}
});
}
});
<div class="content_review">
<div class="title">
<div class="title_icon">
<svg class="svg_icon svg_comment">
<use xlink:href="#icon-comment"></use>
</svg>
</div>
<div class="title_name">Reviews</div>
</div>
<a href="#comment" class="btn_add btn_add-top js_modal">
<span class="icon icon_add">+</span>
Add Comments
</a>
<div class="review_wr">
<div class="review_item positive">
<div class="review_header">
<div class="review_name">
<span class="icon review_icon">
<svg class="svg_icon svg_user">
<use xlink:href="#icon-user"></use>
</svg>
</span>
Guest </div>
<a href="/hyip/bpayment.biz" class="review_link">Bpayment.biz</a>
</div>
<div class="review_body">
<div class="review_text">Good company</div>
</div>
</div>
<div class="review_item positive">
<div class="review_header">
<div class="review_name">
<span class="icon review_icon">
<svg class="svg_icon svg_user">
<use xlink:href="#icon-user"></use>
</svg>
</span>
Guest </div>
</div>
<div class="review_body">
<div class="review_text">Wow!</div>
</div>
</div>
HTML не менял
$(document).on('click', '.title', function() {
var review = $('.content_review .review_item'),
state = true,
width = 200;
if( review.hasClass('small') ) {
state = !state;
width = 400;
}
review.toggleClass("small", state);
$('.content_review .review_item').animate({
width: width
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content_review">
<div class="title">
<div class="title_icon">
<svg class="svg_icon svg_comment">
<use xlink:href="#icon-comment"></use>
</svg>
</div>
<div class="title_name">Reviews</div>
</div>
<a href="#comment" class="btn_add btn_add-top js_modal">
<span class="icon icon_add">+</span>
Add Comments
</a>
<div class="review_wr">
<div class="review_item positive">
<div class="review_header">
<div class="review_name">
<span class="icon review_icon">
<svg class="svg_icon svg_user">
<use xlink:href="#icon-user"></use>
</svg>
</span>
Guest </div>
<a href="/hyip/bpayment.biz" class="review_link">Bpayment.biz</a>
</div>
<div class="review_body">
<div class="review_text">Good company</div>
</div>
</div>
<div class="review_item positive">
<div class="review_header">
<div class="review_name">
<span class="icon review_icon">
<svg class="svg_icon svg_user">
<use xlink:href="#icon-user"></use>
</svg>
</span>
Guest </div>
</div>
<div class="review_body">
<div class="review_text">Wow!</div>
</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Использую кастомные иконки для отображения точек на карте, для отображения использую objectManager, даже если я убираю свойство для кастомной иконки,...
В IQ тесте дается массив с числамиОдно из них отличается от других четностью/нечетностью
Есть понятие "ограничитель" в MySQLНапример, это первичный ключ (ключ должен быть уникален, поэтому каждый раз производится поиск "а не было...