title: clicking word which changes to another?
body: <p>What I want to achieve is to be able to click text on screen and then the text I clicked changes to another word. </p>
  
  <p>For example :</p>
  
  <p>if I click 'view as list' I want it to change to 'Thumbnails'</p>
  
  <p>Here is my attempt below:</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;div class="page-intro"&gt;
      &lt;h2&gt;Artists&lt;/h2&gt;
      &lt;h2 class="thumb-to-list"&gt;View As List&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>.page-intro {
    background: orange;
  }
  
  .page-intro h2 {
    font-weight: normal;
    display: inline-block;
  }
  
  .thumb-to-list {
    float: right;
  }
  </code></pre>
  
  <p>Here is my attempt at code but it's not working:</p>
  
  <pre><code>$('.thumb-to-list').toggle(function() {
      $('.thumb-to-list').text('View As Thumbnails');
  }, function() {
      $('.thumb-to-list').text('View As List');
  });
  </code></pre>