JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Agenda Module -->
<div class="row module">
	<div class="small-12 columns">
		<div class="radius bordered">
			<img src="path-to-image" alt="">
			<div class="module-content">
				<h2>Agenda</h2>
				<ul class="no-bullet agenda-list">
					<li class="agenda-date">Friday 11th September</li>
					<li><span class="agenda-time">19.00</span>Welcome Party</li>
				</ul>
				<ul class="no-bullet agenda-list">
					<li class="agenda-date">Saturday 12th September</li>
					<li><span class="agenda-time">09.45</span>Brunch</li>
					<div class="show-more agenda-show">
						<li><span class="agenda-time">10.10</span>Meet the players</li>
						<li><span class="agenda-time">10.30</span>Driving range and puttin tuition</li>
						<li><span class="agenda-time">11.30</span>Tee-Off</li>
						<li><span class="agenda-time">13.15</span>Lunch at the Club house</li>
						<li><span class="agenda-time">17.00</span>End of play</li>
						<li><span class="agenda-time">19.30</span>Drinks reception</li>
						<li><span class="agenda-time">21.30</span>Guest speaker</li>
					</div>
				<a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a>
				</ul>
				<ul class="no-bullet agenda-list">
					<li class="agenda-date">Sunday 13th September</li>
					<li><span class="agenda-time">08.30</span>Breakfast</li>
					<div class="show-more agenda-show">
						<li><span class="agenda-time">10.30</span>Meet at Lobby for Bus</li>
						<li><span class="agenda-time">11.00</span>Church service</li>
						<li><span class="agenda-time">12.30</span>Bus leaves church</li>
						<li><span class="agenda-time">13.15</span>Lunch at the Club house</li>
						<li><span class="agenda-time">17.00</span>Dinner at the Club house</li>
						<li><span class="agenda-time">19.00</span>Free Evening</li>
					</div>
				<a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END Agenda Module -->

CSS

.show-more{display:none;}

JavaScript

$(".see-more").click(function(e){
  e.preventDefault();

  if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
    $(this).html('See more <i class="fa fa-chevron-right"></i>');
     $(this).prev(".show-more").slideUp('slow');
  } else {
     $(this).html('See less <i class="fa fa-chevron-right"></i>');
     $(this).prev(".show-more").slideDown('slow');
  }
});