JSFiddle - React, Tailwind, and code Playground

by shatul patil

HTML

<h4 class="display_title">FIND A LAWYER BY PRACTICE AREA</h4>
<div class="pc_container">
<h4>Select Practice Area</h4>
<ol class="pa">
	<li> Criminal Defense Law</li>
	<li> Personal Injury / Auto</li>
    <span class="read-more-content">
	<li><a id="Bankruptcy / Foreclosure"></a>Bankruptcy / Foreclosure</li>
	<li><a id="Disability / Social Security"></a>Disability / Social Security</li>
	<li><a id="DUI/DWI"></a>DUI/DWI</li>
	<li><a id="Employment / Harassment"></a>Employment / Harassment</li>
	<li><a id="Family / Divorce Law"></a>Family / Divorce Law</li>
	<li><a id="Immigration Law"></a>Immigration Law</li>
	<li><a id="Intellectual Property Law"></a>Intellectual Property Law</li>
	<li><a id="Medical Malpractice"></a>Medical Malpractice</li>
	<li><a id="Nursing Home Abuse Law"></a>Nursing Home Abuse Law</li>
	<li><a id="Business / Contract Law"></a>Business / Contract Law</li>
	<li><a id="Probate &amp; Estate Planning"></a>Probate &amp; Estate Planning</li>
	<li><a id="Product Liability Law"></a>Product Liability Law</li>
	<li><a id="Real Estate"></a>Real Estate</li>
	<li><a id="Workers' Compensation"></a>Workers' Compensation</li>
        </span>
</ol>
</div>

CSS

.hide {
  display: none;
}

JavaScript

$('.read-more-content').addClass('hide')

// Set up a link to expand the hidden content:
.before('<a class="read-more-show" href="#">Read More</a>')
  
// Set up a link to hide the expanded content.
.append(' <a class="read-more-hide" href="#">Read Less</a>');

// Set up the toggle effect:
$('.read-more-show').on('click', function(e) {
  $(this).next('.read-more-content').removeClass('hide');
  $(this).addClass('hide');
  e.preventDefault();
});

$('.read-more-hide').on('click', function(e) {
  $(this).parent('.read-more-content').addClass('hide').parent().children('.read-more-show').removeClass('hide');
  e.preventDefault();
});