Показать сообщение отдельно
  #7 (permalink)  
Старый 08.12.2023, 20:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Мои 5коп...

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
section {
	margin: 10px;
	border: 1px solid green;
}
.item1:nth-child(n+7) {
	display: none;
}

.item2:nth-child(n+6) {
	display: none;
}

.item1.active,
.item2.active {
	display: block !important;
}
</style>
<script>
$(_ => {
	$('section').each((_, o) => {
		o = $(o)
		const n = o.data('max')
		const oi = o.find('[class^="item"]')
		if (oi.length <= n) return
		const om = o.find('.more')
		om.text('еще')
		o.on('click', _ => {
			oi.addClass('active')
			om.text('')
		})
	})
})
</script>

<section id="id-1" data-max='6'>
	<div class="item1">1</div>
	<div class="item1">2</div>
	<div class="item1">3</div>
	<div class="item1">4</div>
	<div class="item1">5</div>
	<div class="item1">6</div>
	<div class="item1">7</div>
	<div class="item1">8</div>
	<div class="more"></div>
</section>
<section id="id-2" data-max='5'>
	<div class="item2">1</div>
	<div class="item2">2</div>
	<div class="item2">3</div>
	<div class="item2">4</div>
	<div class="item2">5</div>
	<div class="item2">6</div>
	<div class="item2">7</div>
	<div class="item2">8</div>
	<div class="more"></div>
</section>
Ответить с цитированием