cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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');



          
        }
      }
    }
    
  }
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console