JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

READ MORE --- READ LESS

<div class="schedule-box  col-sm-4">
					<h3>THURSDAY , JANUARY 14</h3>
					<ul class="table-list">
					<li>6:00PM</li>
					<li>Banquet Registration Pick-up</li>
					<li>7:00PM</li>
					<li>Doors Open for NASKA Awards Banquet<span><br>Seating is first come, first serve</span></li>
					<li>7:30PM</li>
					<li>Dinner &amp; Awards Banquet Begin</li>
					</ul>
					<ul class="table-list more-cont more-cont1" style="display: none;">
					<li>6:00PM</li>
					<li>Banquet Registration Pick-up</li>
					<li>7:00PM</li>
					<li>Doors Open for NASKA Awards Banquet<span><br>Seating is first come, first serve</span></li>
					<li>7:30PM</li>
					<li>Dinner &amp; Awards Banquet Begin</li>
					</ul>
					<div class="arrow-img arrow-img1"><div class="seemore" id="1">read more</div><img src="images/uparrow.png"></div>
				</div>
                        
                        
                        
                        <div class="schedule-box  col-sm-4">
					<h3>THURSDAY , JANUARY 14</h3>
					<ul class="table-list">
					<li>6:00PM</li>
					<li>Banquet Registration Pick-up</li>
					<li>7:00PM</li>
					<li>Doors Open for NASKA Awards Banquet<span><br>Seating is first come, first serve</span></li>
					<li>7:30PM</li>
					<li>Dinner &amp; Awards Banquet Begin</li>
					</ul>
					<ul class="table-list more-cont more-cont2" style="display: none;">
					<li>6:00PM</li>
					<li>Banquet Registration Pick-up</li>
					<li>7:00PM</li>
					<li>Doors Open for NASKA Awards Banquet<span><br>Seating is first come, first serve</span></li>
					<li>7:30PM</li>
					<li>Dinner &amp; Awards Banquet Begin</li>
					</ul>
					<div class="arrow-img arrow-img1"><div class="seemore" id="2">read more</div><img src="images/uparrow.png"></div>
				</div>
                        
                        <div class="schedule-box  col-sm-4">
					<h3>THURSDAY , JANUARY 14</h3>
					<ul class="table-list">
					<li>6:00PM</li>
					<li>Banquet...

CSS

.more-cont1{ display:none; }

.col-sm-4 { float:left; width:33%; }

JavaScript

jQuery( ".more-cont").hide();
jQuery( ".seemore" ).click(function() {
 var boxid = jQuery(this).attr('id');
    //alert (boxid);
     if(jQuery(this).hasClass("less")) {
         	jQuery( ".more-cont"+boxid).slideUp("slow");
            jQuery(this).removeClass("less");
            jQuery(this).html("read more");
        } else {
            jQuery(".more-cont"+boxid).slideDown("slow");
            jQuery(this).addClass("less");
            jQuery(this).html("read less");
        }
 });