JSFiddle - React, Tailwind, and code Playground

JavaScript

var InterestBalanceDrawer = (function($, window, document){
	var drawer, space, handle, interest_list, body;

	var settings = {
		content_height: 250,
		handle_height: 20,
		drawer_height: 30,
		drawer_slim_height: 15
	};

	/**
	  * Initialize the drawer element handles and call setup functions.
	  */
	var init = function() {
		// We will be moving the body when the drawer expands/collapses
		body = $('body');

		// Container
		drawer = $('<div id="drawer" data-expanded="false"></div>');

		// This is the content container of the drawer
		content = $('<div id="drawer-content"></div>');

		// The button/handle the user clicks on to show/hide the drawer space
		handle = $('<div id="drawer-handle">Show</div>');
		
		// The list of interests inside the drawer space
		interest_list = $('<ul id="drawer-interest-list"></ul>');

		mockCSS();

		buildInterestList();

		bindUIEvents();

		attachToDOM();
	}

	/**
	  * Development only. This will be replaced by real CSS
	  */
	var mockCSS = function() {
		drawer.css({
			'height': settings.drawer_height,
			'width': '100%',
			'position': 'relative',
			'margin-bottom': '25px'
		});

		content.css({
			'position': 'relative',
			'background': '#cccccc',
			'height': 0
		});

		handle.css({
			'position': 'absolute',
			'height': settings.handle_height,
			'bottom': '0',
			'padding': '5px',
			'background': '#333',
			'color': '#fff',
			'cursor': 'pointer'
		});
	}

	/**
	  * Fetches a list of interests and balances. Builds interest_list
	  */
	var buildInterestList = function() {}

	var collapseDrawer = function() {
		drawer.animate({
			'height': '-='+settings.content_height
		});

		content.animate({
			'height': '-='+(settings.content_height)
		});

		handle.text(handle.data('label'));
	}

	var expandDrawer = function() {
		drawer.animate({
			'height': '+='+settings.content_height
		});

		content.animate({
			'height': '+='+(settings.content_height)
		});

		handle.text(handle.data('label'));
	}

	/**
	  * All event...