Foundation make arrow switch with other class when off screen menu opens
<p>So I've tried various javascript functions and toggle options to try and make the button switch from the right arrow to the left. </p>

<pre><code>.arrow-right {
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid white;
  margin-left:10px;

}

.arrow-left {
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 30px solid white;
transform: 
</code></pre>

<p>The javascript I used to do this was </p>

<pre><code>$('#showhide').click(function() {
    $(this).toggleClass('arrow-left');
});
</code></pre>

<p>You can see the issue I'm running into in jsfiddle </p>

<p><a href="http://jsfiddle.net/bbarclay6/qbnc1jn7/7/" rel="nofollow">http://jsfiddle.net/bbarclay6/qbnc1jn7/7/</a></p>

<p>Any help is great and awesome :)</p>