CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Blu
Blu

Reputation: 4056

Hide Specific Div on the user event (i.e click)

I open the my notifications are by clicking on bell image on top of page it just alight and open correctly but now i want whenever user click inside the div of notification then notification box appear same as it but whenever clicks outside div it closes (div id is HSnotifications)

Upvotes: 1

Views: 184

Answers (2)

Sergio
Sergio

Reputation: 28837

This should do what you need. When clicking the background overlay, hide/close the HSnotifications.

<script>
$(document).ready(function() {
    $('.ui-panel-content-wrap').click(function (event) {
        if ($(event.target).hasClass('ui-panel-content-wrap')){
            $('#HSnotifications').hide();
        }
    });
});
</script>

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

Have the document listen to the click event.

$(document).on('click', function (e) {
    e.preventDefault();
    var $target = $(e.target);

    // You are checking the current clicked element is the div 
    // or any of the descendants of the notifications div
    if ($target.closest('#HSnotifications').length) {
        // Clicked inside the notifications.

        // do something
    } else if ($target.is('#showNotificationsBtn')) {
       // If bell button is clicked open the notification
        $('#HSnotifications').show();

    } else {

        // close notifications

        $('#HSnotifications').hide()
    }

});

Check Fiddle

Upvotes: 4

Related Questions