CODEWITHSUNDEEP
jquery
David
David

Reputation: 237

jquery showing div but not hiding it afterwards

Below is my div:

<div id="popup" onClick="hidePopup" style="display:none; position: absolute; 
top: 30px; 
left: 50%; margin-left: -85px; height: 185px; width: 170px; background-color:grey; 
z-index:99; border-style:solid; border-width:1px; 
-webkit-border-radius: 8px;">Message</div>'

here are my two functions:

   function popup(){
     $('#popup').show();
    }
    function hidePopup(){
     $('#popup').hide();
    }

Function popup works fine and hows the above div. but when I click on the abive div, hidePopup fails to hide the div. Is there a simple error in my code or is there some other reason for this?

Thanks

Upvotes: 0

Views: 407

Answers (8)

Evan
Evan

Reputation: 6115

get rid of the onclick and in your document.ready function do

$("#popup").click(function(){
 $(this).toggle();

}

This will change from hidden to visible or visible to hidden depending on what the element is currently.

Upvotes: 0

lamelas
lamelas

Reputation: 872

Try using the toggle function like this:

function popup(){
 $('#popup').toggle();
}

This way you don't have to have different functions to show and hid.

Upvotes: 1

ayyp
ayyp

Reputation: 6598

Why not re-write it as

<div id="popup">Message</div> with this jQuery:


$("#popup").click(function() {
   $(this).toggle();
});

Upvotes: 1

Arief
Arief

Reputation: 6085

change onClick="hidePopup" to onClick="hidePopup()"

Upvotes: 1

slandau
slandau

Reputation: 24052

I think you need more detail in your onClick, try this:

<div id="popup" onClick="hidePopup();" style="display:none; position: absolute; 
top: 30px; 
left: 50%; margin-left: -85px; height: 185px; width: 170px; background-color:grey; 
z-index:99; border-style:solid; border-width:1px; 
-webkit-border-radius: 8px;">Message</div>'

Upvotes: 0

wezzy
wezzy

Reputation: 5935

i can't find any error in your code. Where is the part of your code that calls show() ?

Try adding parenthesis () after onClick="hidePopup" onClick="hidePopup()"

Hope this helps

Upvotes: 0

Peter Bridger
Peter Bridger

Reputation: 9323

You're missing round brackets after your onclick event. The following code will work:

<div id="popup" onClick="hidePopup()" style="display:none; position: absolute; 
top: 30px; 
left: 50%; margin-left: -85px; height: 185px; width: 170px; background-color:grey; 
z-index:99; border-style:solid; border-width:1px; 
-webkit-border-radius: 8px;">Message</div>

hidePopup() being the change

Upvotes: 0

genesis
genesis

Reputation: 50976

<div id="popup" onClick="hidePopup();" style="display:none; position: absolute;

instead of 

<div id="popup" onClick="hidePopup;" style="display:none; position: absolute;

note these brackets ()

Upvotes: 0

Related Questions