I am facing a slight issue with the slideToggle function when there is a link inside the slideup panel. My goal is to create a button that, when clicked, will slide up a div displaying related posts. Subsequently, when another button or project link is clicked on the page, it should close the toggle and reveal an alternate effect I have implemented (a 100% width and height popup). The script seems to be working well, but I am encountering one problem. Clicking on a related post within the slideToggle causes the div to slide down instead of directing to the corresponding link.
Below is my code along with an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// Create a variable to target the #menu div
var menu = $('#menu')
// Bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// If the menu is visible, slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// Otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I modify .projectHolder-small,#projectSpecs in the .not function to only read #menu, I can click the link inside the panel. However, the panel does not slide down when I click another button on the page. Instead, the popup from #project specs overlaps the panel without closing it.
Am I overlooking something in my script?
Thank you