Last clicked element
<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>
