JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div data-accordion-group="">
  <ul id="only-one" data-accordion="" class="accordion">

    <li class="accordion__item">
      <div data-control="" class="accordion__title">

        <h2 class="title">
          This is the accordion heading
        </h2>
      </div>
      <div data-content="" class="accordion__content">

        <p class="body">
          Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
        </p>
      </div>
    </li>
  </ul>
</div>

JavaScript

// UNCOMMENT IF DRUPAL - see components/_meta/_01-foot.twig for attachBehaviors
// Drupal.behaviors.accordion = {
//   attach: function (context, settings) {

(function() { // REMOVE IF DRUPAL

  'use strict';

  /*!
   * jQuery Accordion 0.0.1
   * (c) 2014 Victor Fernandez <[email protected]>
   * MIT Licensed.
   */

  ;
  (function($, window, document, undefined) {

    var pluginName = 'accordion',
      defaults = {
        transitionSpeed: 300,
        transitionEasing: 'ease',
        controlElement: '[data-control]',
        contentElement: '[data-content]',
        groupElement: '[data-accordion-group]',
        singleOpen: true
      };

    function Accordion(element, options) {
      this.element = element;
      this.options = $.extend({}, defaults, options);
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
    }

    Accordion.prototype.init = function() {
      var self = this,
        opts = self.options;

      var $accordion = $(self.element),
        $controls = $accordion.find('> ' + opts.controlElement),
        $content = $accordion.find('> ' + opts.contentElement);

      var accordionParentsQty = $accordion.parents('[data-accordion]').length,
        accordionHasParent = accordionParentsQty > 0;

      var closedCSS = {
        'max-height': 0,
        'overflow': 'hidden'
      };

      var CSStransitions = supportsTransitions();

      function debounce(func, threshold, execAsap) {
        var timeout;

        return function debounced() {
          var obj = this,
            args = arguments;

          function delayed() {
            if (!execAsap) func.apply(obj, args);
            timeout = null;
          };

          if (timeout) clearTimeout(timeout);
          else if (execAsap) func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
        };
      }

      function supportsTransitions() {
        var b = document.body || document.documentElement,
         ...