Remove event handler with .onblur

Hi again,

I’ve been doing a lot of research and nothing works…
I have a navigation menu like this:

<ul class="categories-list">
	<li onclick="loadMH()" onblur="hideMH()" id="must-have" ><a href="#">Must Have</a></li>
	<li onclick="loadOS()" id="on-sale" ><a href="#">On sale</a></li>
</ul>
<div class="wrap">		 
		
		<div id="mh" class='category-display'></div>
	
		<div id="os" class='category-display'></div>
</div>

When I click the first item, some content displays. I use this bit of jquery:

 function loadMH() { 
    $.ajax({
  url: 'must-have.php',
  success: function(data) {
    $('#mh').html(data);
    
  }
});
    }

I do the same thing for the second list-item.
It’s just that I’d like for the content of the first to hide or sth.
I tried something simple but it doesn’t have any effect. Any ideas, pls?

     function hideMH() { 
          document.getElementById('#mh').style.display = 'none';
    }

Thanks!

Hi @anda_sirca, one problem I notice with your last bit of code: you should not use ‘#’ in getElementById.
Try the following :

     function hideMH() { 
          document.getElementById('mh').style.display = 'none';
    }

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.