Taylor Rule - JSFiddle

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>

<!-- begin chart container -->
<div id="TaylorRuleChartContainer">

<!--Begining of Accordion-->
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Taylor Rule</a>
    <ul class="inner show" style="display:block;">
	    <li><div class="line medExpand lgExpand mvl">
  		  <div class="col cols4of12">
			  <label class="typeHighlight1 mtn mbs" for="menu_InflationTargetMeasures">Inflation Target Measures</label>
		  </div>
		  <div class="col cols8of12">
        <select name="menu_InflationTargetMeasures" id="menu_InflationTargetMeasures" class="taylorRuleMenu">
          <option value="TwoPercentInflation">Two Percent</option>
          <option value="PiStarFOMC">Longer-run PCE inflation forecast, FOMC SEP Central Tendency</option>
        </select>
      </div>
      </div>
     </li>
    
    <li><div class="line medExpand lgExpand mbl">
      <div class="col cols4of12">
        <label class="typeHighlight1 mtn mbs" for="menu_NaturalRateMeasures">Natural Real Interest Rate Measures</label>
      </div>
      <div class="col cols8of12">
        <select name="menu_NaturalRateMeasures" id="menu_NaturalRateMeasures" class="taylorRuleMenu">
          <option value="TwoPercentNatural">Two Percent</option>
          <option value="RstarFOMCCentTend">Implied rate derived from FOMC SEP Central Tendency</option>
          <option value="RstarFOMCMedian">Implied rate derived from FOMC SEP Median</option>
          <option value="LWRstar1side">Laubach-Williams model 1-sided estimate</option>
          <option value="LWRstar2side">Laubach-Williams model 2-sided estimate</option>
          <option value="RstarLW1sideRT">Laubach-Williams model 1-sided estimate, real-time</option>
          <option...

SCSS

@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');

* {
    box-sizing: border-box;
    font-family: 'Open Sans',sans-serif;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    font-size:1.1em;
    margin: 1em 0;
}

ul {
    width: 80%;
    list-style: none;
    padding: 0;
    border-style: solid black;
  
    .inner {
        padding-left: 1em;
        overflow: hidden;
        display: none;
        
      
        &.show {
          /*display: block;*/
        }
    }
  
    li {
        margin: .5em 0;
      
        a.toggle {
            width: 100%;
            display: block;
            background: rgba(0,0,0,0.78);
            color: #fefefe;
            padding: .75em;
            border-radius: 0.15em;
            transition: background .3s ease;
          
            &:hover {
                background: rgba(0, 0, 0, 0.9);
            }
        }
    }
}

.ruleLegend tr, td {
   border: 1px solid black;
   background-color: white;
   font-size: 12px;
}

JavaScript

var TwoPercentInflation = [['2/15/2000',2],['5/15/2000',2],['8/15/2000',2],['11/15/2000',2],['2/15/2001',2],['5/15/2001',2],['8/15/2001',2],['11/15/2001',2],['2/15/2002',2],['5/15/2002',2],['8/15/2002',2],['11/15/2002',2],['2/15/2003',2],['5/15/2003',2],['8/15/2003',2],['11/15/2003',2],['2/15/2004',2],['5/15/2004',2],['8/15/2004',2],['11/15/2004',2],['2/15/2005',2],['5/15/2005',2],['8/15/2005',2],['11/15/2005',2],['2/15/2006',2],['5/15/2006',2],['8/15/2006',2],['11/15/2006',2],['2/15/2007',2],['5/15/2007',2],['8/15/2007',2],['11/15/2007',2],['2/15/2008',2],['5/15/2008',2],['8/15/2008',2],['11/15/2008',2],['2/15/2009',2],['5/15/2009',2],['8/15/2009',2],['11/15/2009',2],['2/15/2010',2],['5/15/2010',2],['8/15/2010',2],['11/15/2010',2],['2/15/2011',2],['5/15/2011',2],['8/15/2011',2],['11/15/2011',2],['2/15/2012',2],['5/15/2012',2],['8/15/2012',2],['11/15/2012',2],['2/15/2013',2],['5/15/2013',2],['8/15/2013',2],['11/15/2013',2],['2/15/2014',2],['5/15/2014',2],['8/15/2014',2],['11/15/2014',2],['2/15/2015',2],['5/15/2015',2],['8/15/2015',2],['11/15/2015',2],['2/15/2016',2],['5/15/2016',2],['8/15/2016',2],['11/15/2016',2],['2/15/2017',2],['5/15/2017',2],['8/15/2017',2],['11/15/2017',2]];
var PiStarFOMC =...