CODEWITHSUNDEEP
jquery
Paul Designer
Paul Designer

Reputation: 865

How to close a btn using buttons and canvas?

I have some query to show and hide a box. the btn "normal-btn.interest" used is the trigger and you are able to click off the canvas $(document) to close the btn.

Can someone explain how I can add the button "normal-btn.interest" into the jquery to also close the box as well as having 

$(document

    $('.normal-btn.interest').click(function(e){

            // Prevent the event from bubbling up the DOM tree
            e.stopPropagation();
            $('.categories-wrap').fadeIn();
        });

        $(document, '.normal-btn.interest').click(function(){
            $('.categories-wrap').fadeOut();
        });

Upvotes: 0

Views: 50

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Escaping class name will solve your problem if you applied class normal-btn.interest to your element then use it like '.normal-btn\.interest in place of '.normal-btn.interest' like,

$('.normal-btn\.interest').click(function(e){
   // Prevent the event from bubbling up the DOM tree
   e.stopPropagation();
   $('.categories-wrap').fadeIn(); // must be hidden, to fade in
});
$(document, '.normal-btn\.interest').click(function(){
    $('.categories-wrap').fadeOut(); // must be visible, to fade out
});

If the you have applied two classes then your code is ok no need to escape

Also after looking your Fiddle I saw there is no problem in your code you need to change only the css for class categories-wrap

Change the position from fixed to absolute and decrease the top like

position: absolute;
top: 40px;

Working Fiddle

Upvotes: 1

Related Questions