show div on click and hide if hover on another

Question

I want to show div on hover. Its working fine. Now what actually I want is to add a class if any user click on anchor tag then display div and not hide if mouse leaves on it. Class will get removed if user clicks on anchor tag again or hovered on another div.

    $('#main-menu a').mouseover(function() {
       var $this = $(this);
       var id = $this.attr('rel');
       var $currentWidget = $('#' + id);
       $currentWidget.show().siblings('.widget-container').hide();
    });
    $('#wrap').mouseleave(function() {
        $('.widget-container').hide();
    });
    $('#main-menu a').click(function() {
       var $this = $(this);
       var id = $this.attr('rel');
       var $currentWidget = $('#' + id);
       $currentWidget.addClass('active').siblings('.widget-container').hide();
    });
    $('#wrap').mouseleave(function() {
        $('.widget-container').hide();
    });

Check it here: Fiddle

Answer 1

See this: Demo

$('#main-menu a').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.show().siblings('.widget-container').removeClass('active').hide();
});

And for the anchor tag:

$('#main-menu a').click(function(e) {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.toggleClass('active').siblings('.widget-container').removeClass('active').hide();
   e.preventDefault();
});

Answer 2

Demo look the demo.

I have two correction

first:

$('#main-menu a').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
    $('.active').removeClass('active');
   $currentWidget.show().siblings('.widget-container').hide();
});

Second:

<li><a class="first-link parent" rel="first-widget" href="javascript:">First Link</a></li>

Answer 3

You may try this

$("#testA").on('click',function() {
$('#testdv').toggleClass('test');
$('#testdv').toggle();
});
$(".allOtherdv").hover(
   function() {
$('#testdv').removeClass('test');
$('#testdv').hide();
  }
);


<a href="javascript:void(0);" id="testA" >Click Me</a>
<div id="testdv" style="display:none;margin-top:30px;">Destination Div</div>
<div class="alldv">Any other Div</div>

Thanks

Answer 4

please check this working example can be found here http://jsfiddle.net/Ravindu/b6VF3/

$(document).ready(function() {
$('#main-menu a').mouseover(function() {
    var $this = $(this);
    var id = $this.attr('rel');
    var $currentWidget = $('#' + id);
    $currentWidget.show().siblings('.widget-container').hide();
    if ($('.widget-container').hasClass('active')) {
       $('.widget-container').removeClass('active');
    }
});
$('#main-menu a').click(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.addClass('active').siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
   if ($('.widget-container').hasClass('active')) {

   }else{
       $('.widget-container').hide();
    }
});
});