Simple accordion js for Drupal. Relies on jQuery

accordion.js

/**
 * @file
 * A JavaScript file for the theme.
 * This file should be used as a template for your other js files.
 * It defines a drupal behavior the "Drupal way".
 *
 */

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

(function ($, Drupal, window, document, undefined) {
  'use strict';

  // To understand behaviors, see https://drupal.org/node/756722#behaviors
  Drupal.behaviors.cardCardholderAggreement = {
    attach: function (context, settings) { // jshint ignore:line

      var $allPanels = $('.accordion .accordion-content').hide();
      var $allIcons = $('.accordion .icon-triangle').addClass('closed');
      $('.accordion .trigger').click(function() {
        var $wrapper = $(this).closest('.accordion');
        var $target =  $wrapper.find('.accordion-content');
        var $icon = $(this).find('.icon-triangle');

        if(!$target.hasClass('active')){
          $target.addClass('active').slideDown();
          $icon.removeClass('closed').addClass('opened');
        }
        else {
          $target.removeClass('active').slideUp();
          $allIcons.removeClass('opened').addClass('closed');
        }

        return false;
      });

    }
  };


})(jQuery, Drupal, this, this.document);

Note, the js above relies on jQuery and is designed for Drupal

scss for above js:

.accordion {
  .trigger {
    font-weight: bold;
    position: relative;
  }
  .icon-triangle {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    fill: $grayMed;
    position: absolute;
    left: -1em;
    top: 0.4em;

    &.closed {
      background-image: image-url('triangle-right.svg');
      .no-svg & {
        background-image: image-url('triangle-right.png');
      }
    }

     &.opened {
       background-image: image-url('triangle-down.svg');
       .no-svg & {
         background-image: image-url('triangle-down.png');
       }
     }

    h2 span.first-six-digits {
      font-weight: bold;
      font-size: 0.9em;
    }
  }
}