CODEWITHSUNDEEP
javascriptjquery
David Hope
David Hope

Reputation: 1546

jQuery: hide element after it has been shown?

I have this strange scenario that I cannot understand.

Basically, I show an element using jquery show(); which works fine.

But I need to hide() the same element using the hide(); function but the element stays visible and the hide() doesn't work.

Can someone please advice on this?

Here is a working FIDDLE.

This is my code:

$(document).on('click','.buildExMain', function(e){
$(this).children('.buildExDrop').show();
});


$(document).on('click','.pSelection', function(e){

$('.buildExDrop').hide();
});

Upvotes: 0

Views: 42

Answers (2)

Funk Doc
Funk Doc

Reputation: 1643

Your click to hide also triggers the click to show. this works

$(function(){
$(document).on('click','.buildExMain span', function(e){
$('.buildExDrop').show();
});


$(".buildExMain").on('click','.pSelection', function(){
$('.buildExDrop').hide();
});
});

Upvotes: 1

Phillip Thomas
Phillip Thomas

Reputation: 1479

@billyonecan was spot on, adding e.stopPropagation(); after your $('.buildExDrop').hide(); fixes this.

This allows the hide click event for the sub-elements .pSelection to not bubble up to the show click event of the .buildExDrop element.

Upvotes: 2

Related Questions