public/templates/horizontalbar.html

<div id="outer-wrapper">
  <link href="{{pathway}}chartcss/horizontalbar.css" rel="stylesheet" />
  <div class="row" id="furniture">
    <h1 class="chartTitle" id="chartTitle">{{{title}}}</h1>
    <h2 class="subTitle" id="subTitle">{{{subtitle}}}</h2>
    <div class="row">
      <div class="notes" id="chartKey" aria-hidden="true"></div>
      <span id="showAudioControls" aria-hidden="true">play</span>
    </div>
    <div class="audioControls sr-only" id="audioControls">
      <div id="buttonContainer"></div>
      <div class="notes small" tabindex="0">This chart has an audio option for accessibility. Press space or the control buttons to play and pause the chart, R to replay, A and D to step through a data series point-by-point, and W and S to switch data series. Contact <a href="mailto:nick.evershed@theguardian.com">nick.evershed@theguardian.com</a> about bugs or issues</div>
    </div>
  </div>
  <figure class="row chartSans" id="graphicContainer"></figure>
	<div class='footer offset'>
		<div id="annotations"></div>
		<span id="sourceText" role="note">Guardian Graphic {{#source}} | Source: {{{source}}}{{/source}} {{{footnote}}}</span>
	</div>
</div>

<div class="buttonWrapper">
    <div class="button" data-target=".collapse1" data-toggle="collapse1" id="button2">

      <span id="showbutton" class="is-on">
        <svg class="icon icon--plus" height="18px" viewbox="0 0 18 18" width="18px">
          <path d="M8.2 0h1.6l.4 7.8 7.8.4v1.6l-7.8.4-.4 7.8H8.2l-.4-7.8L0 9.8V8.2l7.8-.4.4-7.8z"></path>
        </svg>Show
      </span> 

      <span id="hidebutton" class="is-off hide">
        <svg class="icon icon--minus" height="32px" viewbox="0 0 32 32" width="32px">
          <rect height="3" width="22" x="5" y="15"></rect>
        </svg>Hide
      </span>
    </div>
</div>