JSFiddle - React, Tailwind, and code Playground

by happierall

HTML

<div id="list">Том Круз, Пенелопа Круc, Эдди Мёрфи</div>
<div class="spoiler-title closed">▼</div>
<div class="spoiler-body">text</div>

CSS

.opened {
    color:green;
    cursor:pointer;
}
.closed {
    color:green;
    cursor:pointer;
}
.spoiler-title {width:15px;}

JavaScript

var text = $("#list").text(),
a = text.split(","),
txt;

for(var i = 0;i < 2;i++)
    a.shift();

$('#list').removeData(txt)
$('.spoiler-body').hide().html(a.join(",")); 

$('.spoiler-title').click(function() { 
    $(this).toggleClass('closed')
    .toggleClass('opened').next().slideToggle(500); 
    if ($(this).hasClass('opened')) { 
        $(this).html('▲'); 
        $('#list').html(text.split(',').slice(0, -1).join(','));
    } else { 
        $(this).html('▼'); 
        $('#list').html(text);
    } 
});