title: How to change a div class title with jQuery
body: <p>I have some collapsible panel divs that have a title attribute.  When my jQuery opens the panel, I want the title attribute to change and I want to specify the div to change via the class of the panel currently being opened.  i.e. this.div.class change title to "whatever".</p>
  
  <p>To make the code stupid simple for your to follow:</p>
  
  <pre><code>&lt;div class="panelContainer"&gt;
      &lt;div class="service"&gt;
        &lt;div class="serviceBrief" title="Click to Read More"&gt;
          &lt;p&gt;Some Stuff for closed panel&lt;/p&gt;
        &lt;/div&gt; &lt;!-- end serviceBrief --&gt;
        &lt;div class="serviceDescContainer"&gt;
          &lt;div class="serviceDesc"&gt;
            &lt;p&gt;some more stuff that shows when panel is open&lt;/p&gt;
          &lt;/div&gt;&lt;!-- end serviceDesc --&gt;
        &lt;/div&gt;&lt;!-- end serviceDescContainer --&gt;
       &lt;/div&gt;&lt;!-- end service --&gt;
     &lt;div class="service"&gt;
       &lt;div class="serviceBrief" title="Click to Read More"&gt;
         &lt;p&gt;Some Stuff for closed panel&lt;/p&gt;
       &lt;/div&gt; &lt;!-- end serviceBrief --&gt;
       &lt;div class="serviceDescContainer"&gt;
         &lt;div class="serviceDesc"&gt;
           &lt;p&gt;some more stuff that shows when panel is open&lt;/p&gt;
         &lt;/div&gt;&lt;!-- end serviceDesc --&gt;
       &lt;/div&gt;&lt;!-- end serviceDesc Container --&gt;
    &lt;/div&gt;&lt;!-- end service --&gt;
  &lt;/div&gt; &lt;!-- end panelContainer --&gt;
  </code></pre>
  
  <p>I understand how to do this using ID's</p>
  
  <pre><code>            $('#sampleID').attr('title', 'Click to Read More');
  </code></pre>
  
  <p>But I want to do this referencing the div class to change the title attribute so when the panel is open the title="Click to Read Less"</p>
  
  <p>I thought this would work:</p>
  
  <pre><code>$('.serviceBrief').attr('title', 'Click to Read Less');
  </code></pre>
  
  <p>and it does, but obviously it changes all instances of the title attribute instead of just the one that is open.  I know I am missing making this a "this" type command in jQuery, but all my various attempts are failing and I can't for the life of me find a reference anywhere.</p>
  
  <p>Can someone point me in the right direction?  Thanks!</p>
  
  <pre><code>$(document).ready(function() {
  
  $('.serviceBrief').each(function(){
      $(this).append('&lt;div class="panelOpenArrow"&gt;&lt;/div&gt;&lt;div class="panelClosedArrow"&gt;&lt;/div&gt;');
  });
  
  $('.serviceBrief').click(function(){
      if ($(this).parent().is('.open')) {
          $(this).closest('.service').find('.serviceDescContainer').animate({'height':'0'},500);
          $(this).closest('.service').find('.panelOpenArrow').fadeOut(500);
          $(this).closest('.service').find('.panelClosedArrow').animate({'height': '25px'});
          $(this).closest('.service').removeClass('open');
      }else{
          var newHeight = $(this).closest('.service').find('.serviceDesc').height() + 'px';
          $(this).closest('.service').find('.serviceDescContainer').animate({'height':newHeight},500);
          $(this).closest('.service').find('.panelOpenArrow').fadeIn(500);
          $(this).closest('.service').find('.panelClosedArrow').animate({'height':'0'});
          $(this).closest('.service').addClass('open');
      }
  });
  
  });
  </code></pre>