title: Pulling both values from 2d array but only showing one
body: <p>Hi I'm attempting to pull only the first word in the array I've built — and then on click of "flip" — show the antonym it's paired with. i.e. pull 0 and 1 <em>but only show 0</em> until a button is clicked (then have 0 switch out for 1). The code below works fine, but as of right now, it's pulling and appending both words to #input. </p>
  
  <p>Here's my JS:</p>
  
  <pre><code>var words = [];
  words[0] = ['Budding','Accomplished']; 
  words[1] = ['Curious','Certain']; 
  words[2] = ['Realistic','Idealistic']; 
  words[3] = ['Practicle','Imaginative']; 
  
  function random_sort () {
        return (0.5 - Math.random() );
  }
  
  words.sort(random_sort);
  
  var i = 0,
      n = words.length;
  
  $("#forward").data('dir', 1);
  $("#back").data('dir', -1);
  
  $("#forward, #back").on('click', function() {
      i = (i + $(this).data('dir') + n) % n;
      $("#input").hide().html(words[i]).fadeIn(100);
      $(words[i][1]).hide();
  });
  
  $("#back").trigger('click');
  </code></pre>
  
  <p>and my html:</p>
  
  <pre><code>&lt;object id="back" type="image/svg+xml" data="images/arrow.svg"&gt;&lt;/object&gt;
  &lt;p id="input"&gt;&lt;/p&gt;
  &lt;object id="forward" type="image/svg+xml" data="images/arrow.svg"&gt;&lt;/object&gt;
  
  &lt;img id="flip" src="images/fliptext.svg"&gt;
  </code></pre>
  
  <p>Any help is much appreciated. Thanks!</p>