JSFiddle - React, Tailwind, and code Playground

by Eugeny Venegrad

HTML

<div class="js-num-spoiler" data-el="3">
	<div class="js-spoil">test</div>
    <div class="js-spoil">test</div>
    <div class="js-spoil">test</div>
    <div class="js-spoil">test</div>
    <div class="js-spoil">test</div>
    <div class="js-spoil">test</div>
    <div class="js-spoil">test</div>
</div>

CSS

.not-active {
    display: none;
}

JavaScript

function numspoiler() {

	if($(".js-num-spoiler").length > 0) {
		$(".js-num-spoiler").each(function(i) {

			i++;

			var thisdata = $(this).data("el");
			var whatlength = $(this).find(".js-spoil").length;
			var whatnumber = thisdata - 1;

			$(this).attr("data-numsa", i);

			$(this).find(".js-spoil").eq(whatnumber).nextAll(".js-spoil").addClass("not-active"); 

			if(whatlength > thisdata) {
				$(this).append("<a href='javascript:opennumspoiler("+i+", "+whatnumber+");' class='underline cl-fivegrey font-12 marg-top-15 block js-active-for-spoiler'>показать все</a>");
			} 

		});
	}
}

function cleannumspoiler(serpa, el) {
	$(".js-num-spoiler[data-numsa='"+serpa+"']").find(".js-spoil").eq(el).nextAll(".js-spoil").addClass("not-active");
	$(".js-num-spoiler[data-numsa='"+serpa+"']").find(".js-active-for-spoiler").html("показать все").attr("href", "javascript:opennumspoiler("+serpa+", "+el+");");
}

function opennumspoiler(serpa, el) {
	$(".js-num-spoiler[data-numsa='"+serpa+"']").find(".js-spoil").removeClass("not-active");
	$(".js-num-spoiler[data-numsa='"+serpa+"']").find(".js-active-for-spoiler").html("скрыть").attr("href", "javascript:cleannumspoiler("+serpa+", "+el+");");
}

$(document).ready(function() {
    numspoiler();
});