My Accord

by gkohen

HTML

<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="http://bgrins.github.io/spectrum/spectrum.css">
 
<div id="accordion">

  </div>
</div>

CSS

/* IE has layout issues when sorting (see #5413) */
  .group { zoom: 1 }
.state-preview{
    padding:2px;
    display:inline-block;
    float:right;
}

#accordion {
    max-width:300px;
    font-size:0.8em;
}

#accordion div p{
    font-size:0.9em;
}

.ruleHeaderLabel{
 	text-overflow: ellipsis;
	width: 70%;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	/* for good looks */
	padding-right: 10px;   
}
.ruleBackground{
    float:left;
}
.ruleText{
    margin-left:1em;
    float:left;
    background:blue;
    color:white;
}
.styleRule_1{
    background-color:red;
    color:blue;
}
.styleRule_2{
    background-color:yellow;
    color:red;
}
.styleRule_3{
    background-color:black;
    color:yellow;
}
.styleRule_4{
    background-color:green;
    color:black;
}

JavaScript

var styleRules=[
    {background:'green',
     color:'black',
     name:'[2]>1000',
     description:"Base History>1000 CountryA/SubCatBB/Total/Targets.aggr 01/05/2013",
     scope:'3\\65\\$329 534',
     scopeDesc:'CountryA/SubCatBB/Total/Targets.aggr 01/05/2013'
    },
    {background:'yellow',
     color:'red',
     expr:'[5]=0',
     description:"Total Forecast<500 CountryA/SubCatBB/Total Targets.aggr",
     scope:'3\\65\\$329',
     scopeDesc:'CountryA/SubCatBB/Total Targets.aggr'
    },
    {background:'black',
     color:'yellow',
     expr:'[29]>0',
     description:"Total Targets.aggr>=0 CountryA/Total Targets.aggr",
     scope:'3\\\\$329',
     scopeDesc:'CountryA/Total Targets.aggr'
    },
    {background:'green',
     color:'black',
     name:'[30]=0',
     description:"Impact Of Lock.aggr>1000",
     scope:'\\$30',
     scopeDesc:'Impact Of Lock.aggr'
    }]; 
var previewStr='abc123';
$.each(styleRules,function(index,rule){
    var previewStyle='color:'+rule.color+';background:'+rule.background+';';
    var $previewElement=$('<SPAN/>').text(previewStr).addClass('state-preview ui-corner-all previewElement').css({color:rule.color,background:rule.background});
    var $previewElementHeader=$('<SPAN class="groupHeader"/>').append($('<SPAN class="ruleHeaderLabel"/>').text(rule.description).attr('title',rule.description))
                .append($previewElement);    
    var $previewBackground=$previewElement.clone().css({background:rule.background,color:getContrastColor(rule.background)}).text('Background').toggleClass('ruleBackground previewElement');
    var $previewText=$previewElement.clone().css({background:rule.color,color:getContrastColor(rule.color)}).text('Text').toggleClass('ruleText previewElement');
    
    var $ruleElement=$('<DIV class="group"/>')
        .append($previewElementHeader)
        .append(
            $('<DIV/>').append($('<P/>').text(rule.name))
            .append($previewBackground,$previewText)
        );
    $(...