JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>

<div id="occ" class="pad">content</div>

<h3 class="heading">Text2<span id="span2" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">content</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">content</div>

JavaScript

jQuery(document).ready(function () {
    jQuery(".pad").hide();

    //toggle the componenet with class msg_body
    jQuery(".heading").click(function () {
        var $pad = $(this).next(".pad");
        var $arrow = $(this).find("span");
        if ($pad.is(':visible')) {
            $arrow.html('&#8744;');
        } else {
            $arrow.html('&#8743;');
        }
        $pad.slideToggle(500);
    });
});