JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<div id="zs_resources_toolbox">
<div class="accordion resource-toolbox" id="accordion_zs1">
<!--accordian start-->
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_zs1" href="#collapse_zs1">
             <h3>RESOURCES TOOLBOX</h3>
            </a>
        </div><!--end accordion-heading-->
        
        <div id="collapse_zs1" class="accordion-body collapse in">
            <div class="accordion-inner">                                
                <div class="accordion" id="accordion_zs2">


                </div>
            </div><!--end accordion-inner-->
        </div><!--end accordion-body collapse in-->
    </div><!-- end accordion-group-->
</div><!-- end accordion-->

</div><!-- end toolbox --->

JavaScript

var zs_resource_toolbox = [
{"title" : "SDNP Visitor Survey 2011-12",
"description" : "The full technical report of the South Downs Visitor Survey 2011-2012 providing facts, figure and data sources.",
"keystage" : ["General Interest", "Key Stage 4", "Key Stage 5", "Key Stage 1", "Key Stage 2", "Key Stage 3"],
"thumbnail" : "http://learning.southdowns.gov.uk/__data/assets/image/0006/314790/owl.png", "url" : "http://learning.southdowns.gov.uk/__data/assets/pdf_file/0010/319906/SDNP-Visitor-Survey-2011-12.pdf",
"icon" : "http://learning.southdowns.gov.uk/__data/asset_types/pdf_file/icon.png"
},
{"title" : "Introduction-to-tourism-in-National-Park.pptx",
"description" : "A PowerPoint presentation introducing facts, figures and impacts of tourism within the National Park",
"keystage" : ["Key Stage 4", "Key Stage 5", "General Interest", "HE & FE", "EYFS"],
"thumbnail" : "http://learning.southdowns.gov.uk/__data/assets/image/0006/314790/owl.png",
"url" : "http://learning.southdowns.gov.uk/__data/assets/powerpoint_doc/0004/321754/Introduction-to-tourism-in-National-Park.pptx",
"icon" : "http://learning.southdowns.gov.uk/__data/asset_types/powerpoint_doc/icon.png"
}
]; 

Object.prototype.hasOwnProperty = function(property) {
    return typeof(this[property]) !== 'undefined'
};

var zs = {};

/**
* Builds the resources toolbox
*
* @access public
*/
zs.resourceToolbox = function() {
	
	// Make sure we want to create the toolbox
    var r = $('#zs_resources_toolbox');
	if (r.length > 0) {
		
		var zsr_local = zs_resource_toolbox;
		if (zsr_local.length > 0) {
            var categories = {};
            var keys = new Array();
			for (var a in zsr_local) {
                for (var i = 0; i < zsr_local[a].keystage.length; i++) {
                    var key = zsr_local[a].keystage[i];
                    var title = zsr_local[a].title;
                    if (categories.hasOwnProperty(key)) {
                        categories[key][title] = zsr_local[a];
                    }...