CSS Animation Tabs

HTML

<html>

<h2>Item Specifics</h2>
  <button class="accordions shipping border-radius" style="background-color: #ff9300;">Shipping</button>
  <div class="panels">
    <p>Shipped via USPS. Arrives in 2-3 business days.</p>
  </div>

  <button class="accordions payment border-radius" style="background-color: #00b852;">Payment</button>
  <div class="panels">
    <p>Credit Card is our trusted and only accepted form of payment.</p>
  </div>

  <button class="accordions returns border-radius" style="background-color: #3498db;">Returns</button>
  <div class="panels">
    <p>Returns are gladly accepted within 14 days of recieving your item.</p>
  </div>

  <button class="accordions feedback border-radius" style="background-color: #FFDE20;">Feedback</button>
  <div class="panels">
    <p>We would love to hear from you! Make sure you leave feedback after recieving your item!</p>
  </div>
  </html>

CSS

/* Accordion Tabs */

    button.accordions {
      width: 90%;
      margin-bottom: 5px;
      margin-left: 5%;
      padding: 18px;

      cursor: pointer;
      text-align: left;

      color: #fff;
      border: none;
      border-bottom: 3px solid #000;
      outline: none;
      background-color: #eee;

      font-size: 15px;
    }

    button.accordions.active,
    button.accordions:hover {
      background-color: #ccc;
    }

    button.accordions:hover {
      transition: height 0.5 ease;

      height: 75px;
    }

    button.accordions:after {
      float: right;

      margin-left: 5px;

      content: '\002B';

      color: #fff;

      font-weight: bold;
    }

    button.accordions.active:after {
      content: "\2212";
    }

    div.panels {
      overflow: hidden;

      max-height: 0;
      padding: 0 5%;

      background-color: white;
    }

    button.shipping {
      border-bottom-color: #950
    }

    button.payment {
      border-bottom-color: #073;
    }

    button.returns {
      border-bottom-color: #069
    }

    button.feedback {
      border-bottom-color: #ca0
    }

JavaScript

var acc = document.getElementsByClassName("accordions");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = "inherit";
        }
      }
    }