title: Add DISPLAY: NONE to span via jQuery when: mouse-click outside span, OR click EXIT button, etc+
body: <p>What I want is really simple, but every time I try to add the functionality I want, the more I'd mess things up, so I decided to ask help and stick with the working basic script I have now.</p>
  
  <p>I already have a script in progress, that I would like to develop to work almost exactly like this:
  <a href="https://stackoverflow.com/a/7133084/1399030">https://stackoverflow.com/a/7133084/1399030</a> <strong>{</strong> <a href="http://jsfiddle.net/Paulpro/YpeeR/25/" rel="nofollow noreferrer">http://jsfiddle.net/Paulpro/YpeeR/25/</a> <strong>}</strong>  (by: <strong>PaulP.R.O.</strong>)</p>
  
  <ul>
  <li>Open a hidden span  </li>
  <li>Hide a hidden span  </li>
  <li>Span has "CLOSE" button to exit span  </li>
  <li>Hide currently opened span when another span is triggered</li>
  </ul>
  
  <p>Think... <strong>Image Gallery Preview functionality</strong>... Kind of. </p>
  
  <p>"Preview" spans are triggered when either <code>.popCover</code> or <code>a.thumbnail</code> is clicked on the webpage, this <strong>hidden span</strong> will appear based on its specified <strong>unique id</strong>, by jQuery inserting <code>display: block;</code> to its css.<br>
  This is inside a loop with multiple items.  </p>
  
  <p>I've gotten this far and this is the working script that I use:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
  
      $('.popCover').click(function(){ 
       divID = $(this).attr('id');
          $("#tooltip-"+divID).fadeIn('5000', function() {
          $("#tooltip-"+divID).css("display", "block");
          });
      });
  
      $("a.thumbnail").click(function() {
       dvID = $(this).attr('id');
          $("#tooltip-"+dvID).fadeIn('5000', function() {
          $("#tooltip-"+dvID).css("display", "block");
          });
      });
  
  
  });
  </code></pre>
  
  <p>But now, I need to add to these functions the trigger to <strong>make the span disappear again</strong>, (by inserting <code>display: none;</code> to its css.</p>
  
  <p><strong>I'd want the CURRENT SPAN to disappear when:</strong><br>
  <strong>01.</strong> Mouse click is made outside of the span element<br>
  <strong>02.</strong> An <strong>exit</strong> or <strong>X</strong> button is clicked INSIDE the span. (like on image galleries, when they preview an image, and exit it by either clicking outside the element or an exit button provided within the preview)<br>
  <strong>03.</strong> <code>.popCover</code> or <code>a.thumbnail</code> is re-clicked (probably to trigger another span of a different ID to show.)  </p>
  
  <p><strong>NOTES:</strong><br>
  Currently, I can click as many anchors on the page and all these spans with different IDs just accumulate and stack up over each other on the page.
  I don't really want that. <strong>I don't want more than 1 span to be open at one time</strong>, so I was hoping to add functionality that would make the current opened span exit itself when another anchor click is made.</p>
  
  <p>I really did try to do this myself, but... I can't get the methods I've tried to work. It was too complicated to add all these functions together since I'm no jQuery expert. I could get one to work and then ruin it by trying to work in another.</p>
  
  <p>Also, I was thinking of using this similar way of exiting the span:  </p>
  
  <pre class="lang-js prettyprint-override"><code>$(".the_span").fadeOut("5000").css("display", "none");
  </code></pre>
  
  <p>The only reason I'm not willing to just use some plugin and uncomplicate things for me is, I already really like my "Preview" span css, I have it all ready. I just need the jquery part to work:</p>
  
  <p>To <code>display: block</code> a span when triggered, and <code>display: none</code> it if mentioned conditions are met.</p>
  
  <p>Hoping for assistance, and will be very grateful for each single one! Thank you.</p>