Show/Hide Multiple DIVs via Click (JQuery)

by Matthew Schenker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class = "button_box">
  <input type="button" class="show_button" value="Open All Three">
  <input type="button" class="show_button2" value="Open Just 2">
  <input type="button" class="show_button3" value="Open Just 3">
</div>

<div class="read_more">
  <input type="button" class="hide_button" value="Close Info">
  <p>Show or hide me with the button!</p>
   <a href="http://www.amazon.com" target="_blank">Amazon!</a> 
</div>

<div class="read_more2">
  <input type="button" class="hide_button2" value="Close Info2">
  <p>Show or hide me -- the second -- with the button!</p>
</div>

<div class="read_more3">
  <input type="button" class="hide_button3" value="Close Info3">
  <p>Show or hide me -- the third -- with the button!</p>
</div>

CSS

.button_box {
  margin-bottom: 50px;
}

.show_button,
.hide_button,
.show_button2,
.hide_button2,
.show_button3,
.hide_button3 {
  border: none;
  color: #fff;
}

.show_button,
.show_button2,
.show_button3 {
  background-color: #ff8d57;
}

.hide_button,
.hide_button2,
.hide_button3 {
  background-color: #ff0000;
}

.read_more,
.read_more2,
.read_more3 {
  display: none;
  float: left;
  width: 20%;
  background-color: #fff;
  opacity: 0.8;
  padding: 10px 5%;
  margin-left: 1%;
}

JavaScript

$(document).ready(function() {
  $(".show_button").click(function() {
    $(".show_button, .read_more").toggle(300);
    $(".show_button2, .read_more2").toggle(300);
    $(".show_button3, .read_more3").toggle(300);
  });
  $(".hide_button").click(function() {
    $(".show_button, .read_more").toggle(300);
    $(".show_button2, .read_more2").toggle(300);
    $(".show_button3, .read_more3").toggle(300);
  });
   $(".show_button2").click(function() {
    $(".show_button2, .read_more2").toggle(300);
  });
  $(".hide_button2").click(function() {
    $(".show_button2, .read_more2").toggle(300);
  });
   $(".show_button3").click(function() {
    $(".show_button3, .read_more3").toggle(300);
  });
  $(".hide_button3").click(function() {
    $(".show_button3, .read_more3").toggle(300);
  });
});