title: Last clicked element
body: <p>I have a list of divs like this:</p>
  
  <pre><code>&lt;div class="item"&gt;Click&lt;/div&gt;
  &lt;div class="content"&gt;Hidden Content&lt;/div&gt;
  &lt;div class="item"&gt;Click&lt;/div&gt;
  &lt;div class="content"&gt;Hidden Content&lt;/div&gt;
  &lt;div class="item"&gt;Click&lt;/div&gt;
  &lt;div class="content"&gt;Hidden Content&lt;/div&gt;
  &lt;div class="item"&gt;Click&lt;/div&gt;
  &lt;div class="content"&gt;Hidden Content&lt;/div&gt;
  &lt;div class="item"&gt;Click&lt;/div&gt;
  &lt;div class="content"&gt;Hidden Content&lt;/div&gt;
  </code></pre>
  
  <p>When the page is loaded the first div which has the id content is shown. What i would like to do is when i click on some other div (id="item") to hide the content of the previous clicked item and do some changes to the previous clicked div (id="item"). So far i've tried this:</p>
  
  <pre><code>$(document).ready(function(){
          $(".item").first().css("border-right","none");
          $(".item").click(function(e) {
          $pressed = $(this);
               if ($pressed.data("lastclick")){
                      $pressed.data("lastclick").css("border-right","solid");
                      $pressed.data("lastclick").css("border-right-width","1px");
                      $pressed.data("lastclick").find("span").remove();
               } 
      $(this).next(".content").slideToggle(\'slow\', function() {
                   if ( $(this).is(":visible")) {
                        $pressed.css("border-right","none");
                        $pressed.append(\'&lt;span style="float:right;font-weight:bold"&gt;\'+$(this).children().length+\'&lt;/span&gt;\');
                        $pressed.data("lastclick",$pressed);    
              }
              });});});
  </code></pre>