JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="bucket-filter-container"></div>

CSS

/*accordion css*/
			a{
			  text-decoration: none;
			}
			.accordion dt, .accordion dd {
			  padding: 10px;
			  border: 1px solid black;
			  border-bottom: 0;
			}
			.accordion dt:last-of-type, .accordion dd:last-of-type {
			  border-bottom: 1px solid black;
			}
			.accordion dt a, .accordion dd a {
			  display: block;
			  color: black;
			  font-weight: bold;
			}
			.accordion dd {
			  border-top: 0;
			  font-size: 12px;
			  background: #FFF;
			}
			.accordion dd:last-of-type {
			  border-top: 1px solid white;
			  position: relative;
			  top: -1px;
			}
			.active{
			  background: #029ecb;	
			}
			.chevron{
			  float: right;
			  margin-top: -11px;
			  width: 0; 
			  height: 0; 
			}
			.arrow-right {
			  border-top: 5px solid transparent;
			  border-bottom: 5px solid transparent;
			  border-left: 5px solid black;
			}

			.arrow-down {
			  border-left: 5px solid transparent;
			  border-right: 5px solid transparent;
			  border-top: 5px solid #fff;
			  float: right;
			  margin-top: -9px;
            }

JavaScript

//new updated on Wednesday Nov 25,2015
var data = {
    "productFullDTO": {
        "productFilterDTOs": {
            "lifestyle-watches": [{
                "id": "",
                "filterName": "",
                "filterValue": "",
                "filterValidValues": ["..", ".."],
                "productCategoryId": "",
                "bucketId": ".."
            }, {
                "id": "",
                "filterName": "",
                "filterValue": "",
                "filterValidValues": [".", ".."],
                "productCategoryId": "",
                "bucketId": ".."
            }],
                "lifestyle-clock": [
            {
                "id": "",
                "filterName": "",
                "filterValue": "",
                "filterValidValues": ["..", ".."],
                "productCategoryId": "",
                "bucketId": ".."
             }
            ]
        }
    },
        "bucketDTOs": [{
        "bucketDisplayName": "lifestyle-watches",
            "bucketId": 12597,
            "categoryLabels": "lifestyle-watches",
            "filterDTOs": [{
            	"bucketDto": "",
                "displayType": "rangeSlider",
                "expandable": false,
                "filterName": "Price",
                "id": 236,
                "invisible": false,
                "isAttribute": false,
                "name": "Price",
                "priority": 0,
                "searchable": false
        }, {
            	"bucketDto": "",
                "displayType": "checkBox",
                "expandable": false,
                "filterName": "Strap_Type",
                "id": 433,
                "invisible": false,
                "isAttribute": false,
                "name": "Strap Type",
                "priority": 0,
                "searchable": false
        }, {
            	"bucketDto": "",
                "displayType": "checkBox",
                "expandable": false,
                "filterName":...