attebury/bo-table__data--collapsible.html

## bo-table__data--collapsible.html
<!--
    *
    *  The table container expands to fill the width of its parent column.
    *
    *  Uses progressive enhancement so hidden rows are visible without javascript.
    *  Requires the absence of a .no-js class on the <html> node.
    *
    *  Place this in the document head for progressive enhancement
    *  <script type="text/javascript">
    *  	document.documentElement.classList.remove('no-js');
    *  </script>
    *
    *  Place .is-invisible on each row you want to initially hide.
    *
    *  Depends on boCollapsibleTable jQuery plugin for interactivity.
    *  You must manually reference this jQuery plugin.
    *  It is not included in the default BO library.
    *  <script src="/assets/v1/src/js/bo/jquery-collapsibletable-1.0.0.js"></script>
    *
    *  Instatiate the plugin like any other
    *  $('.js-bo-table__data--collapsible').boCollapsibleTable();
    *
    *  If you need custom styling or functionality, add custom classes as appropriate
-->

<div class="bo-table__container--collapsible">
	<table class="bo-table bo-table__data bo-table__data--collapsible is-collapsed js-bo-table__data--collapsible">
		<caption>Reserves</caption>
		<thead>
			<tr>
			  <th scope="column" class="bo-table__data--collapsible__heading">Reserves</th>
			  <th class="bo-table__currency" scope="column">Paid</th>
			  <th class="bo-table__currency" scope="column">Outstanding</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="4">
					<button class="btn btn-link btn-small bo-btn__icon bo-table__data--collapsible__toggle-button js-bo-table__data--collapsible__toggle-button"><i class="icon icon-toggle-down"></i></button>
				</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th scope="row">Medical</th>
				<td class="bo-table__currency">$8,000.80</td>
				<td class="bo-table__currency">$10,000.00</td>
			</tr>
			<tr>
				<th scope="row">Time Loss</th>
				<td class="bo-table__currency">$8.41</td>
				<td class="bo-table__currency">$0.00</td>
			</tr>
			<tr>
				<th scope="row">PPD</th>
				<td class="bo-table__currency">$1.00</td>
				<td class="bo-table__currency">$9.00</td>
			</tr>
			<tr class="is-invisible">
				<th scope="row">PTD</th>
				<td class="bo-table__currency">$8.00</td>
				<td class="bo-table__currency">$9.00</td>
			</tr>
			<tr class="is-invisible">
				<th scope="row">Fatal</th>
				<td class="bo-table__currency">$2.00</td>
				<td class="bo-table__currency">$9.00</td>
			</tr>
			<tr class="is-invisible">
				<th scope="row">Legal Fees</th>
				<td class="bo-table__currency">$4.00</td>
				<td class="bo-table__currency">$9.00</td>
			</tr>
	  	</tbody>
	</table>
</div>


## jquery-collapsibletable-1.0.0.js
/*!
 *  Collapsible Table jQuery Plugin
 *  John Attebury
 *  2014-6-25
 *
 *  UMD plugin can be used as an AMD module or a browser global
 *
 *  Collapsible Table hides rows which don't need to be viewed very often.
 *  Clicking the table toggles those hidden rows.
 *
 *
 */

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    // Create the defaults once
    var pluginName = "boCollapsibleTable",
        defaults = {

        };

    // The actual plugin constructor
    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function () {
            $(this.element).on("click", this.toggle);
            /*  need a better way to handle this
             *  maybe do queries here and pass to functions
             */
            $('.js-bo-table__data--collapsible__toggle-button').on('click', function (e) {
                e.preventDefault();
            });
        },

        toggle: function (e) {
            e.preventDefault();

            var $table,
                buttonState,
                buttonText,
                $toggleButton;

            $table = $(this);
            $table.toggleClass('is-collapsed');

            buttonState = $table.hasClass('is-collapsed') ? 'down' : 'up';
            buttonText = '<i class="icon icon-toggle-' + buttonState + '"></i>';
            $toggleButton = $table.find('.js-bo-table__data--collapsible__toggle-button');

            $toggleButton.html(buttonText);
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin(this, options));
            }
        });
    };
}));
	<!--
	*
	* The table container expands to fill the width of its parent column.
	*
	* Uses progressive enhancement so hidden rows are visible without javascript.
	* Requires the absence of a .no-js class on the <html> node.
	*
	* Place this in the document head for progressive enhancement
	* <script type="text/javascript">
	* document.documentElement.classList.remove('no-js');
	* </script>
	*
	* Place .is-invisible on each row you want to initially hide.
	*
	* Depends on boCollapsibleTable jQuery plugin for interactivity.
	* You must manually reference this jQuery plugin.
	* It is not included in the default BO library.
	* <script src="/assets/v1/src/js/bo/jquery-collapsibletable-1.0.0.js"></script>
	*
	* Instatiate the plugin like any other
	* $('.js-bo-table__data--collapsible').boCollapsibleTable();
	*
	* If you need custom styling or functionality, add custom classes as appropriate
	-->

	<div class="bo-table__container--collapsible">
	<table class="bo-table bo-table__data bo-table__data--collapsible is-collapsed js-bo-table__data--collapsible">
	<caption>Reserves</caption>
	<thead>
	<tr>
	<th scope="column" class="bo-table__data--collapsible__heading">Reserves</th>
	<th class="bo-table__currency" scope="column">Paid</th>
	<th class="bo-table__currency" scope="column">Outstanding</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<td colspan="4">
	<button class="btn btn-link btn-small bo-btn__icon bo-table__data--collapsible__toggle-button js-bo-table__data--collapsible__toggle-button"><i class="icon icon-toggle-down"></i></button>
	</td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
	<th scope="row">Medical</th>
	<td class="bo-table__currency">$8,000.80</td>
	<td class="bo-table__currency">$10,000.00</td>
	</tr>
	<tr>
	<th scope="row">Time Loss</th>
	<td class="bo-table__currency">$8.41</td>
	<td class="bo-table__currency">$0.00</td>
	</tr>
	<tr>
	<th scope="row">PPD</th>
	<td class="bo-table__currency">$1.00</td>
	<td class="bo-table__currency">$9.00</td>
	</tr>
	<tr class="is-invisible">
	<th scope="row">PTD</th>
	<td class="bo-table__currency">$8.00</td>
	<td class="bo-table__currency">$9.00</td>
	</tr>
	<tr class="is-invisible">
	<th scope="row">Fatal</th>
	<td class="bo-table__currency">$2.00</td>
	<td class="bo-table__currency">$9.00</td>
	</tr>
	<tr class="is-invisible">
	<th scope="row">Legal Fees</th>
	<td class="bo-table__currency">$4.00</td>
	<td class="bo-table__currency">$9.00</td>
	</tr>
	</tbody>
	</table>
	</div>
	/*!
	* Collapsible Table jQuery Plugin
	* John Attebury
	* 2014-6-25
	*
	* UMD plugin can be used as an AMD module or a browser global
	*
	* Collapsible Table hides rows which don't need to be viewed very often.
	* Clicking the table toggles those hidden rows.
	*
	*
	*/

	(function (factory) {
	if (typeof define === 'function' && define.amd) {
	// AMD. Register as an anonymous module.
	define(['jquery'], factory);
	} else {
	// Browser globals
	factory(jQuery);
	}
	}(function ($) {
	// Create the defaults once
	var pluginName = "boCollapsibleTable",
	defaults = {

	};

	// The actual plugin constructor
	function Plugin(element, options) {
	this.element = element;

	this.options = $.extend({}, defaults, options);

	this._defaults = defaults;
	this._name = pluginName;
	this.init();
	}

	Plugin.prototype = {

	init: function () {
	$(this.element).on("click", this.toggle);
	/* need a better way to handle this
	* maybe do queries here and pass to functions
	*/
	$('.js-bo-table__data--collapsible__toggle-button').on('click', function (e) {
	e.preventDefault();
	});
	},

	toggle: function (e) {
	e.preventDefault();

	var $table,
	buttonState,
	buttonText,
	$toggleButton;

	$table = $(this);
	$table.toggleClass('is-collapsed');

	buttonState = $table.hasClass('is-collapsed') ? 'down' : 'up';
	buttonText = '<i class="icon icon-toggle-' + buttonState + '"></i>';
	$toggleButton = $table.find('.js-bo-table__data--collapsible__toggle-button');

	$toggleButton.html(buttonText);
	}
	};

	// A really lightweight plugin wrapper around the constructor,
	// preventing against multiple instantiations
	$.fn[pluginName] = function (options) {
	return this.each(function () {
	if (!$.data(this, "plugin_" + pluginName)) {
	$.data(this, "plugin_" + pluginName,
	new Plugin(this, options));
	}
	});
	};
	}));