JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="containertoggle">
	<li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a>
		<div style="display: none;">
			<p>This is the beginning of the sentence and this is the end of the sentence </p>
		</div></li>
	<li><a class="opener" style="text-decoration: none;"> <span style="color: #585858;">This is the begining of the sentence </span>(...)</a>
		<div style="display: none;">
			<p>This is the beginning of the sentence and this is the end of the sentence </p>
		</div></li></ul>

CSS

ul{
    list-style-type: none;
}

JavaScript

var $j = jQuery.noConflict();
$j(function () {
$j('#containertoggle').on('click', 'a.opener', function () {
     $j(this).next().toggle('slow').find('p').append('<span>[close]</span>');
     $j(this).hide();
 });
 $j('#containertoggle').on('click', 'span', function () {
     $j(this).closest('div').toggle('slow').closest('li').find('a').show();
     $j(this).remove();
 });
});