Toggle element

HTML

<ul class="user-alt">
   <li class="messages">
 <a title="Messages"href="javascript:void(0);">Open/Close</a> 
   <div class="bar-pop" style="display:none;border:1px solid #ccc;padding:10px;"> 
	  Hidden block Here
      </div>
 </li>
</ul>

JavaScript

$(document).on('click', '.user-alt > li > a', function(e){
    var popup = $(this).parent('li').find('.bar-pop');
	$(".user-alt > li .bar-pop").not(popup).hide();
	$('.menu-accountparent.selectedMenuItem').not($(this)).removeClass('selectedMenuItem');
	$(this).toggleClass('selectedMenuItem');
	popup.toggle();
});

$(document).on('click', function (e) {
    var click = $('a');
    var pop = $('.bar-pop');
     if (!click.is(e.target) && click.has(e.target).length === 0)
    {
        pop.hide();
    }
});