title: how to toggle div in jquery with unicode arrow only
body: <p>I am trying to toggle a div with an arrow; this is the code I have so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.hide-show').hide();
  $('.toggle-year').on('click', function() {
    $(this).html($(this).text().substr(0, 4) == 'Hide' ? '&amp;#9660;' : 'Hide &amp;#9650;');
    $('.hide-show').toggle('slow');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="javascript:void(0)" class="toggle-year"&gt;&amp;#9660;&lt;/a&gt;
  &lt;div class="hide-show"&gt;
    Content comes here
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This example works fine but needs the text <code>Hide</code> to change the arrow back to downwards. How can I strip out the text <code>Hide</code> (so arrows only?)</p>
  <p><a href="http://jsfiddle.net/canshqy4/" rel="nofollow noreferrer">Fiddle</a></p>