JSFiddle - React, Tailwind, and code Playground

Cream Soda jQuery Accordion

by Jennifer Perrin

HTML

<header>
			<img src="http://www.markrosssmith.co.uk/showcase/creamsoda/jquery_accordion/img/logo.png"/>
		</header>

		<section>
			<div class="demo">
				<ul>
					<li data-title="What is Cream Soda?" data-featured="true" class="">
						<p>Cream soda is a sweet carbonated soft drink, often flavored with vanilla.</p>
					</li>
					<li data-title="History and development">
						<p>A recipe for cream soda written by E.M. Sheldon and published in Michigan Farmer in 1852 called for water, cream of tartar, Epsom salts, sugar, tartaric acid, egg, and milk, to be mixed, then heated, and when cool mixed with water and a quarter teaspoonful of soda (sodium bicarbonate) to make an effervescent drink.
						</p>
					</li>
					<li data-title="Cream Soda in the US">
						<p>In the United States, cream soda is often vanilla-flavored and is either clear or colored a light golden brown in appearance; but red, pink, orange and blue are also relatively common color variants. In addition, in some places in the U.S. where the drink is made on location, especially in cafes, cream soda consists of soda water, vanilla syrup, and cream or half and half.</p>
					</li>
					<li data-title="Hong Kong Cream Soda?">
						<p>In Hong Kong, the Swire Coca Cola Company markets a yellow Schweppes Cream Soda. Some people enjoy Cream Soda in a 1:1 ratio with fresh milk.</p>
					</li>
				</ul>
			</div>

  </section>

CSS

/* Custom Mixins*/
/* Variables */
/*	Cream Soda Colours */
/* Base Page Styles */
/* line 13, ../sass/base.scss */
html, body {
  margin: 0;
  min-height: 100%;
  padding: 0;
  font-family: 'helvetica', 'arial';
}

/* line 20, ../sass/base.scss */
h1 {
  font-size: 1.8em;
  margin-bottom: 0;
  color: #3a3a3a;
}

/* line 26, ../sass/base.scss */
h2 {
  font-size: 1.5em;
}

/* line 31, ../sass/base.scss */
p {
  font-size: 1em;
  color: #858585;
}

/* line 36, ../sass/base.scss */
body {
  background: #fff;
  /*url(../img/bg/wg_blurred_backgrounds_14.jpg) no-repeat center fixed $cream;*/
  font-size: 16px;
  background-size: cover;
}

/* line 42, ../sass/base.scss */
strong, a {
  color: #5ac9b2;
  font-weight: bold;
  text-decoration: none;
}

/* line 49, ../sass/base.scss */
code {
  background: #fff;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 1px solid #eaeaea;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  display: block;
}
@media (min-width: 720px) {
  /* line 49, ../sass/base.scss */
  code {
    padding: 1em;
  }
}
@media (min-width: 1200px) {
  /* line 49, ../sass/base.scss */
  code {
    padding: 1em;
  }
}
/* line 64, ../sass/base.scss */
code span {
  padding-left: 3em;
}

/* line 68, ../sass/base.scss */
header {
  width: columns-width(12);
  padding: 1em;
  text-align: center;
}
@media (min-width: 720px) {
  /* line 68, ../sass/base.scss */
  header {
    padding: 1em;
  }
}
@media (min-width: 1200px) {
  /* line 68, ../sass/base.scss */
  header {
    padding: 1em;
  }
}

/* line 75, ../sass/base.scss */
header .logo {
  background: url(http://www.markrosssmith.co.uk/showcase/creamsoda/jquery_accordion/img/logo.png) no-repeat center;
  display: inline-block;
  width: 16em;
  height: 20em;
}

/* line 83, ../sass/base.scss */
body > section {
  margin: 0 auto;
  max-width: 80%;
  background: transparent;
  border-radius: 5px;
  margin-bottom:...

JavaScript

$.fn.csAccordion = function (args) {
        var defaults = {
            // hoverOver: false,
            customCSS: false,
            delay: 5000,
            autoAnimate: true,
            accordionTitle: false,
            pauseOnHover: true,
            backgroundColour: false,
            titleColour: false,
            titleTextColour: false
        };

        var args = $.extend({}, defaults, args);

        //Globals
        var autoplay;
        var ctx = $(this).attr('id');
        var currentSlide = 0;
        var pause = false;

        /*********************************************
			Initialise CS Accordion
			**********************************************/

        if (args.customCSS) {
            $("<link/>", {
                rel: "stylesheet",
                type: "text/css",
                href: customCSS
            }).appendTo("head");
        }

        var $this = this;

      

        if (args.accordionTitle) {
            $(this).prepend('<div class="csAccordion__title">' + args.accordionTitle + '</div>');
        }

        $(this).find('ul').wrap('<div class="wrapper"></div>');

       


      
            $(this).find('li').each(function () {
                var content = $(this).html();

                if (args.highlightFeatured && $(this).data('featured') == true) {
                    $(this).addClass('featured');
                }


                var html = '';
                    html += '<div class="col heading">';
                if ($(this).data('title')) {
                    html += '<p class="h3">' + $(this).data('title') + '</p><div class="expand"></div>';
                }

                    html += '</div><div class="col content"><div class="inner_content">' + content + '</div>';

              



                $(this).empty().append(html);
            });
      

        /*********************************************
			Configure CS Ticker
			**********************************************/

       ...