Нужно повесить 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>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости