JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<h1>Example One</h1>
<div id="specialty_description" class="specialty_textdetails_wrap">
    <p>Text goes here. <a href="#" class="read_more show_more" style="display: inline;">Read&nbsp;more&nbsp;&#8595;</a></p>
    <div class="more_specialty" style="display: none;">
        <p>Generally, a primary care physician</p>
        <p>Cardiologists may diagnose and treat <a href="#" class="read_more hide_more">Hide&nbsp;&#8593;</a> 
        </p>
    </div>
</div>
<h1>Example Two</h1>
<div id="specialty_training" class="specialty_textdetails_wrap">
    <p>Text goes here. <a href="#" class="read_more show_more" style="display: inline;">Read&nbsp;more&nbsp;&#8595;</a></p>
    <div class="more_specialty" style="display: none;">
        <p>Generally, a primary care physician</p>
        <p>Cardiologists may diagnose and treat <a href="#" class="read_more hide_more">Hide&nbsp;&#8593;</a> 
        </p>
    </div>
</div>
<hr />

CSS

p {margin:0; padding:0 0 1.5em 0;}

JavaScript

$('.specialty_textdetails_wrap').on('click', '.show_more', function (event) {
    event.preventDefault();
    event.stopPropagation();
    var h = $(this);
    var w = h.closest('div.specialty_textdetails_wrap');
    h.fadeOut(200, function () {
        w.find('div.more_specialty').slideDown(function () {
            w.find('a.hide_more').fadeIn(300);
        });
    });
});

$('.specialty_textdetails_wrap').on('click', '.hide_more', function (event) {
    event.preventDefault();
    event.stopPropagation();
    var h = $(this);
    var w = h.closest('div.specialty_textdetails_wrap');
    h.fadeOut(200, function () {
        w.find('div.more_specialty').slideUp(function () {
            w.find('a.show_more').fadeIn(300);
        });
    });
});