title: jQuery toggle more button toggle multiple divs
body: <p>I've written jquery for a toggle button...</p>
  
  <pre><code>$(document).ready(function(){
      /* Needs to be re-written for multiple questions */
      $(".full_question").hide();
      $('.question a').after('&lt;a class="show_full_question" href="#"&gt;more&lt;/a&gt;');
  
      $('.show_full_question').click(function() {
      var el = this;
          $(".full_question").toggle(function() {
              $(el).text($(el).text() == 'less' ? 'more' : 'less');
              $(el).toggleClass("hide_full_question");
          });
      });
  });
  </code></pre>
  
  <p>it toggles between the full question width and partial width. But when clicked it toggles for all questions on the page. How would I get it toggle only one?</p>
  
  <p>I know it has something to do with $(this) but not sure where it goes... I don't mind changing the html if necessary.</p>
  
  <p>The html is...</p>
  
  <pre><code>&lt;h3 class="question"&gt;
    &lt;a href="#"&gt;What size is the circumference of the earth? I don't really know what it is! Help me! What size is the...
      &lt;span class="full_question"&gt; circumference of the earth? I really don't know!&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h3&gt;
  </code></pre>