仅单击指定的链接时显示指定的元素

Question

I have this html structure

<a href="#" class="dp">Click me</a>

<div class="dp_div" style="display: none;">
  this is the div content
</div>

I want to show the hidden div that has a class of "dp_div" when click on a link that has a class of "dp" and then if click to other element (if the current target click element is not '.dp' and '.dp_div'), the .dp_div will be hide, on the contrary, when click either .dp_div or the .dp then do not hide.

This is what I tried so far but sadly not working.

$(document).on('click', function(event) {
    if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
    {
        alert('either .dp or .dp_div is click!!');
    } else {
        alert("not .dp or .dp_div is click");
    }
});

Answer 1

You code snippet is missing a paranthesis

$(document).on('click', function(event) {
    if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
    {
        alert('either .dp or .dp_div is click!!');
    } else {
        alert("not .dp or .dp_div is click");
    }
});

Please see the fiddle here for a demo

Answer 2

This code will show the element if the HREF (link) is clicked on:

$(document).on('click', function(event) {
    if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div")){
        $('.dp_div').fadeIn();
    } else {
        alert("not .dp or .dp_div is click");
    }
});

http://jsfiddle.net/L0LmLquj/

You may use:

$('.dp_div').show();

or

$('.dp_div').fadeIn();

or even: $('.dp_div').toggle(); if you wish to toggle the element upon clickation.