Show/Hide Multiple Divs via Click

by Matthew Schenker

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="default_view_container">
  <ul>
    <li>This is the First One</li>
    <li>Line 1-2</li>
    <li>Line 1-3</li>
  </ul>
  <a class="read-more-show hide" href="#">open</a>
  <div class="read-more-content">
    <a class="read-more-hide hide" href="#">close</a>
    <p>More Content Line 1-1</p>
    <p>More Content Line 1-2</p>
    <p>More Content Line 1-3</p>
  </div>
</div>

<div class="default_view_container">
  <ul>
    <li>And Here's the Second One! We can keep going...</li>
    <li>Line 2-2</li>
    <li>Line 2-3</li>
  </ul>
  <a class="read-more-show hide" href="#">open</a>
  <div class="read-more-content">
    <a class="read-more-hide hide" href="#">close</a>
    <p>More Content Line 2-1</p>
    <p>More Content Line 2-2</p>
    <p>More Content Line 2-3</p>
  </div>
</div>

CSS

.default_view_container {
  clear: both;
  border: 2px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
  width: 20%;
}

.hide {
  display: none;
}

a {
  text-decoration: none;
}

.read-more-content {
  position: absolute;
  right: 30%;
  top: 50px;
  background: #fff;
  padding: 10px;
}

.read-more-hide {
  font-size: 24px;
}

JavaScript

$('.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();
});

// Control toggled material
$('.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();
});