title: Jquery click only work once on toggle
body: <p>I am using the following script to show a different background depending on the state of the div. </p>
  
  <p>When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything). </p>
  
  <p>The problem there is that only work once, and I dont know why. </p>
  
  <p>Here's the code:</p>
  
  <p>EDIT (added HTML)!</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;body&gt;
      &lt;section&gt;
          &lt;div class="wrapper wf"&gt;
              &lt;ul id="Parks" class="just"&gt;
  &lt;!--------------- PRODUCT --&gt;
                  &lt;li class="mix" href="#therapy_vital" &gt;
                  &lt;div class="meta name"&gt;
                          &lt;div class="img_wrapper"&gt;
                              &lt;img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/&gt;
                          &lt;/div&gt;
                          &lt;div class="titles"&gt;
                              &lt;h2&gt;TITLE&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Expand --&gt;
                      &lt;div href="#therapy_vital" class="nav-toggle"&gt;&lt;/div&gt;
                      &lt;div id="therapy_vital" style="display:none"&gt;
                  &lt;article class="ac-small"&gt;
                   SUBCONTENT&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                   &lt;/article&gt;
                  &lt;/div&gt;
                  &lt;/li&gt; 
  &lt;!--------------- PRODUCT --&gt;
                  &lt;li class="mix" href="#therapy_natur" &gt;
                  &lt;div class="meta name"&gt;
                          &lt;div class="img_wrapper"&gt;
                              &lt;img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/&gt;
                          &lt;/div&gt;
                          &lt;div class="titles"&gt;
                              &lt;h2&gt;TITLE&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- Expand --&gt;
                      &lt;div href="#therapy_natur" class="nav-toggle"&gt;&lt;/div&gt;
                      &lt;div id="therapy_natur" style="display:none"&gt;
                  &lt;article class="ac-small"&gt;
                   SUBCONTENT&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                   &lt;/article&gt;
                  &lt;/div&gt;
                              &lt;/li&gt; 
  &lt;/ul&gt;
  &lt;/div&gt;                      
          &lt;/section&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>$(document).ready(function() {
      $('.meta').click(function() {
          $(this).css('background', 'none');
      });
      $('.mix').click(function() {
          var collapse_content_selector = $(this).attr('href');
          var toggle = $(this);
          $('.meta').click(function() {
              $(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
          });
          $(collapse_content_selector).toggle(function() {});
      });
  });
  </code></pre>
  
  <p>(The .mix value makes the Div expands, and the .meta class switch to different background).</p>
  
  <p>Any clue?</p>
  
  <p>EDIT2 (Live example)</p>
  
  <p><a href="http://anubisfiles.com/test/test.html" rel="nofollow">http://anubisfiles.com/test/test.html</a></p>
  
  <p>(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).</p>
  
  <p>Thanks!</p>