title: jQuery fade content + change div
body: <p>I have this little thingy:
  <a href="http://jsfiddle.net/7hqyq/" rel="nofollow">http://jsfiddle.net/7hqyq/</a></p>
  
  <p>And since I'm new to jQuery I'd like to know how to change the background color of the selected square (and thus of the first square on loading the page). And how to fade in/out the content text of the details div.</p>
  
  <p>Thanks in advance ;)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="square" contentId="c1"&gt;&lt;/div&gt;
  &lt;div class="square" contentId="c2"&gt;&lt;/div&gt;
  &lt;div class="square" contentId="c3"&gt;&lt;/div&gt;
  &lt;div class="square" contentId="c4"&gt;&lt;/div&gt;
  
  &lt;div id="details"&gt;Content for div 1&lt;/div&gt;
  
  &lt;div style="display: none" id="c1"&gt; Content for div 1&lt;/div&gt;
  &lt;div style="display: none" id="c2"&gt; Content for div 2&lt;/div&gt;
  &lt;div style="display: none" id="c3"&gt; Content for div 3&lt;/div&gt;
  &lt;div style="display: none" id="c4"&gt; Content for div 4&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.square{
  width: 80px;
  height: 80px;
  margin: 10px;
  float: left;
  background: #CCC;
  }
  
  #details{
  width: 380px;
  height: 100px;
  margin: 10px;
  float: left;
  background: #999;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(".square").on("click", function() { 
      var id= $(this).attr("contentId");
      $("#details").html($("#" + id).html());
  });
  </code></pre>