JSFiddle - React, Tailwind, and code Playground
HTML
<div class="comments-m">
<div class="comments-content-m center">
<h2 class="h2">Comments from our<br> customers</h2>
<h2 class="small">You can ask your question by filling in the form<br> Callback</h2>
<div class="comnnetators-m" id="accordion">
<h3><img src="img/coms.png" alt=""><span>Paul Demichev</span></h3>
<div>
<h4>Web designer</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Oleg Topanic</span></h3>
<div>
<h4>Программист</h4>
<p>This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Julia Usina</span></h3>
<div>
<h4>Повар</h4>
<p>In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Serdyuk Elena</span></h3>
<div>
<h4>Студентка</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Kulikov Vlad</span></h3>
<div>
<h4>Главный механик</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
<h3><img src="img/coms.png" alt=""><span>Andrey Tikhonov</span></h3>
<div>
<h4>Сварщик</h4>
<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
</div>
</div>
</div>
</div>
JavaScript
$( function() {
var icons = {
header: "up",
activeHeader: "down"
};
$( "#accordion" ).accordion({
icons: icons,
collapsible: true
});
$( "#toggle" ).button().on( "click", function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
} );
$('#accordion').click(function(){
location.reload();
});