Show/Hide Series of Elements on <a> Click

by Matthew Schenker

HTML

<div class="event_item">
  <p>Date 1</p>
  <p class="event_title">TITLE</p>
  <p>Venue 1</p>
  <a class="read-more-show hide" href="#">+</a><span class="read-more-content">
	<p class="small_more_text">First One! This is the main text that gets shown/hidden when clicked or unclicked.</p>
	<a  class="read-more-hide hide" href="#">-</a></span>
</div>

<div class="event_item">
  <p>Date 1</p>
  <p class="event_title">TITLE</p>
  <p>Venue 1</p>
  <a class="read-more-show hide" href="#">+</a><span class="read-more-content">
	<p class="small_more_text">First One! This is the main text that gets shown/hidden when clicked or unclicked.</p>
	<a  class="read-more-hide hide" href="#">-</a></span>
</div>

<div class="event_item">
  <p>Date 1</p>
  <p class="event_title">TITLE</p>
  <p>Venue 1</p>
  <a class="read-more-show hide" href="#">+</a><span class="read-more-content">
	<p class="small_more_text">First One! This is the main text that gets shown/hidden when clicked or unclicked.</p>
	<a  class="read-more-hide hide" href="#">-</a></span>
</div>

<div class="event_item">
  <p>Date 1</p>
  <p class="event_title">TITLE</p>
  <p>Venue 1</p>
  <a class="read-more-show hide" href="#">+</a><span class="read-more-content">
	<p class="small_more_text">First One! This is the main text that gets shown/hidden when clicked or unclicked.</p>
	<a  class="read-more-hide hide" href="#">-</a></span>
</div>

CSS

.event_item {
  margin: 0 0 40px 0;
  float: left;
  padding-left: 50px;
  position: relative;
  clear: both;
}

p {
  font-size: 16px;
  margin: 0 0 8px 0;
}

a {
  text-decoration: none;
  color: #0084b4;
}

.hide {
  display: none;
}

.read-more-content p,
.small_text {
  font-size: 12px;
}

JavaScript

// Javascript code to show/hide parts of the text (original -- http://codepen.io/JoshBlackwood/pen/pEwHe).
    // Hide the extra content initially, using JS.
    $('.read-more-content').addClass('hide')
    $('.read-more-show, .read-more-hide').removeClass('hide')

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

    // Changes contributed by @diego-rzg
    $('.read-more-hide').on('click', function(e) {
      var p = $(this).parent('.read-more-content');
      p.addClass('hide');
      p.prev('.read-more-show').removeClass('hide'); // Hide only the preceding "Read More"
      e.preventDefault();
    });