JSFiddle - React, Tailwind, and code Playground

HTML

<a class="option_view-all" href="#">Развернуть все</a>

<div class="item">
    <div class="option_short">
        Клик сюда
    </div>
    <div class="option_detail">
        Контент...
    </div>
</div>
<div class="item">
    <div class="option_short">
        Клик сюда
    </div>
    <div class="option_detail">
        Контент...
    </div>
</div>
<div class="item">
    <div class="option_short">
        Клик сюда
    </div>
    <div class="option_detail">
        Контент...
    </div>
</div>
<div class="item">
    <div class="option_short">
        Клик сюда
    </div>
    <div class="option_detail">
        Контент...
    </div>
</div>

CSS

.item {
    margin-bottom: 5px;
}
.option_short {
    background-color: #77BFE4;
}
.option_detail {
    display: none;
    background-color: #ccc;
}

JavaScript

$('.option_view-all').on('click', function(){
		var h = $('.option_short').next('.option_detail:hidden').length;
			console.log('hidden = ' + h);
		var v = $('.option_short').next('.option_detail:visible').length;
			console.log('visible = ' + v);

		if (h >= v) {
			$('.option_short').addClass('active').next('.option_detail').stop().slideDown(300);
			$(this).text('Свернуть все');
		} else {
			$('.option_short').removeClass('active').next('.option_detail').stop().slideUp(300);
			$(this).text('Развернуть все');
		};
        
		return false;
	});

	$('.option_short').on('click', function(){
		$(this).toggleClass('active').next('.option_detail').stop().slideToggle(300);
		if ($('.option_short').next('.option_detail:hidden').length == 0) {
			$('.option_view-all').text('Свернуть все');
			console.log('hid = ' + $('.option_short').next('.option_detail:hidden').length);
		} else if ($('.option_short').next('.option_detail:visible').length == 1) {
			$('.option_view-all').text('Развернуть все');
			console.log('vis = ' + $('.option_short').next('.option_detail:visible').length);
		};
        
		return false;
	});