title: Change Span CSS Class OnClick
body: <p>I have a Span tag like so</p>
  
  <pre><code>&lt;span id="SpanHeader" class="CourseHeader"&gt;&lt;a class="SubCourses" href="#" &gt;&lt;strong&gt;@course.CourseTitle&lt;/strong&gt;&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The Span is styled by a CSS class called CourseHeader. When the user clicks the hyperlink within the Span I would like the Span CSS class to toggle with another CSS class.</p>
  
  <p>I have the following CSS elements</p>
  
  <pre><code>/********* Course Collaspable Headings ******/
  .CourseHeader
  {
      background-color: #F5F5F5; 
      border: 1px solid black; 
      display: inline-block; 
      width: 600px; 
      padding: 4px; 
      color: Black;
  }
  
  .CourseHeader.Black
  {
      background-color: #000000;
      border: 1px solid black;
      display: inline-block;
      width: 600px;
      padding: 4px;
      color: #FFFFFF;
  }
  </code></pre>
  
  <p>And the following JQuery code to try and make the Span change style once the hyperlink is clicked</p>
  
  <pre><code>$("a.SubCourses").click(onSubCourses);
  
  function onSubCourses() {
  
      $(".SpanHeader").toggleClass("Black");
  
  }
  </code></pre>
  
  <p>I've tried looking at how others have achieved this, <a href="http://jsfiddle.net/Starx/r5WWQ/" rel="nofollow">like this</a> however I can't get it working myself.</p>
  
  <p>Could someone please help?</p>
  
  <p>Thanks.</p>