I want to hide my search field when the user clicks ANYWHERE but not on the search field itself and the icon which activates the search field.

I tried it like this:

2. $(function() {
3. $('.top-searchField').hide();
4. $('.icon-close-searchField').hide();
5. });
6. 
   
7. $(document).ready(function() {
8. $('#search-icon').click(function() {
9. $('.top-searchField').show('slow');
10. $('.icon-top-searchField').hide('slow');
11. $('.icon-close-searchField').show('slow');
12. });
13. 
    
14. $('div').not('.top-searchField, #search-icon').click(function() {
15. $('.icon-top-searchField').hide('slow');
16. $('.top-searchField').hide('slow');
17. });
18. });

My icon and my search field look like this:

1. <input placeholder="Type something..." class="top-searchField" type="text" />
2. <span id="search-icon" class="icon-search icon-white icon-top-searchField"></span>

Every time I click on the icon it shows me the search field but then it's getting hidden again. It is just totally ignoring my not selector!

How do I fix this?