<div class="container">
          <h1>Animated SCSS Accordion (yep, responsive)</h1>
          <div class="acc">
            <dl>
              <dt><a class="acc_title" href="#">Heading Panel One</a></dt>
              <dd class="acc_panel acc_panel_col">
                <p>Present belly, scratch hand when stroked sleep in the bathroom sink so if it fits, i sits hack up furballs who's the baby leave dead animals as gifts. Vommit food and eat it again make muffins, yet intrigued by the shower sleep in the bathroom sink and see owner, run in terror but poop on grasses. Find something else more interesting hate dog, or vommit food and eat it again spread kitty litter all over house. Sit in box loves cheeseburgers or meowing non stop for food shove bum in owner's face like camera lens sleep in the bathroom sink. Chase ball of string purr for no reason plan steps for world domination need to chase tail, or play time destroy couch, and jump off balcony, onto stranger's head. Curl into a furry donut. Curl into a furry donut roll on the floor purring your whiskers off, swat at dog. Run in circles give attitude. Ears back wide eyed. Pooping rainbow while flying in a toasted bread costume in space. Eat grass, throw it back up loves cheeseburgers for love to play with owner's hair tie for hunt anything that moves have secret plans. 
                </p>
              </dd>
              <dt><a href="#" class="acc_title">Heading Panel Two</a></dt>
              <dd class="acc_panel acc_panel_col">
                <p>Under the bed run in circles intently stare at the same spot, and eat grass, throw it back up but spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce. Scratch the furniture meowing non stop for food. Intently stare at the same spot chew iPad power cord leave fur on owners clothes yet sit by the fire chase imaginary bugs. Hunt anything that moves sit by the fire. Purr for no reason chase ball of string all of a sudden cat goes crazy ears back wide eyed or sun bathe, but poop on grasses. Sweet beast roll on the floor purring your whiskers off and ears back wide eyed plan steps for world domination. Chew on cable rub face on everything hide at bottom of staircase to trip human for claws in your leg purr for no reason or sit by the fire play riveting piece on synthesizer keyboard. Hide when guests come over hunt anything that moves roll on the floor purring your whiskers off purr for no reason, or find something else more interesting.</p>
              </dd>
              <dt><a href="#" class="acc_title">Heading Panel Three</a></dt>
              <dd class="acc_panel acc_panel_col">
                <p>Shake treat bag meowing non stop for food missing until dinner time meow all night having their mate disturbing sleeping humans make muffins, for stare at the wall, play with food and get confused by dust burrow under covers. Intrigued by the shower cat snacks claw drapes, hide when guests come over. If it fits, i sits intently stare at the same spot, but missing until dinner time nap all day, throwup on your pillow mark territory chase imaginary bugs. Ears back wide eyed under the bed, meow all night having their mate disturbing sleeping humans sweet beast hopped up on catnip, for shake treat bag. Sit by the fire spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce. </p>
              </dd>
            </dl>
          </div>
        </div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  height:100vh;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  background-image: linear-gradient(135deg, rgba(155, 89, 182,0.8) 0%,rgba(211, 84, 0,0.8) 100%), url("https://i.imgur.com/QRbwNvh.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  margin:0;
}

h1 {
  font-size: 1.5em;
  padding: 0.5em;
  text-align: center;
  font-weight:300;
  color:#444;
  background:rgba(255,255,255,0.2);
  border-radius:5px;
  margin-bottom:40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.acc {
  dl {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    &:after {
      content: "";
      display: block;
      height: 1em;
      width: 100%;
      background-color: #2980b9;
    }
  }
  dt > a {
    text-align: center;
    font-weight: 300;
    padding: 2em;
    display: block;
    text-decoration: none;
    color: #fff;
    -webkit-transition: background-color 0.5s ease-in-out;
  }
  dd {
    background-color: #fff;
    font-size: 1em;
    line-height: 1.5em;
    background-image: linear-gradient(to bottom, #444 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    > p {
      padding: 1em 2em 1em 2em;
    }
  }
  position: relative;
  background-color: #fff;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding:40px 0 0 0;
}

.acc_title {
  background-color: #3498db;
  border-bottom: 1px solid #258cd1;
  &:before {
    content: "+";
    font-size: 1.5em;
    line-height: 0.5em;
    float: left;
    transition: transform 0.3s ease-in-out;
  }
  &:hover {
    background-color: #2980b9;
  }
}

.acc_title_active {
  background-color: #2980b9;
  &:before {
    transform: rotate(-225deg);
  }
}

.acc_panel {
  height: auto;
  overflow: hidden;
}

@media all {
  .acc_panel {
    max-height: 50em;
    transition: max-height 1s;
  }
}

@media screen and (min-width: 48em) {
  .acc_panel {
    max-height: 15em;
    transition: max-height 0.5s;
  }
}

.acc_panel_col {
  max-height: 0;
}

.anim_in {
  animation-name: acc_in;
  animation-duration: 0.65s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

.anim_out {
  animation-name: acc_out;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}


@keyframes acc_in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes acc_out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 */


( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

//fake jQuery
var $ = function(selector){
  return document.querySelector(selector);
}
var accordion = $('.acc');





//add event listener to all anchor tags with accordion title class
accordion.addEventListener("click",function(e) {
  e.stopPropagation();
  e.preventDefault();
  if(e.target && e.target.nodeName == "A") {
    var classes = e.target.className.split(" ");
    if(classes) {
      for(var x = 0; x < classes.length; x++) {
        if(classes[x] == "acc_title") {
          var title = e.target;

          //next element sibling needs to be tested in IE8+ for any crashing problems
          var content = e.target.parentNode.nextElementSibling;
          
          //use classie to then toggle the active class which will then open and close the accordion
         
          classie.toggle(title, 'acc_title_active');
          //this is just here to allow a custom animation to treat the content
          if(classie.has(content, 'acc_panel_col')) {
            if(classie.has(content, 'anim_out')){
              classie.remove(content, 'anim_out');
            }
            classie.add(content, 'anim_in');

          }else{
             classie.remove(content, 'anim_in');
             classie.add(content, 'anim_out');
          }
          //remove or add the collapsed state
          classie.toggle(content, 'acc_panel_col');



          
        }
      }
    }
    
  }
});