Here is how I am adding custom jquery to a wordpress theme I am currently developing.. in other words how I am making an inbox in the header and want it to display when the user clicks on the inbox icon and then disappear when you click on something else.
First I had to call the jquery script in the foot.php of my wordpress theme (you want it being the last thing loaded)
I imported it using the following code to ensure that it will be compatible with other themes on other websites
I then added this code to the file /js/effects.js
// First of all hide all elements you want hidden when page loads
$(‘.inbox-mail’).hide(); // hiding mail box
// when you click the icon
$(“.inbox-mail”).toggle(); // toggle is an intelligent show/hide
e.stopPropagation(); //stop propagation helps with when clicking away
$(“.inbox-mail”).hide(); // when you click anywhere in the document rehide mail but it doesn’t matter if when clicking inside this div due to stoppropagation
e.stopPropagation(); //stop propagation prevents the conflict with the above code as you are clicking the document as well
You can adapt this method to create all sorts of different effects from popups to menu items.