Issue with calling parent of object onClick

Having a problem with this one-page site where the idea is you click on the links and a box slides down but it also needs a close function to bring it back up. Problem is the close button is in the element to be animated, so it needs to be called by its’ parent, I presume. I’ve tried a variety of different ways to accomplish this but nothing seems to work. If you go to http://upsilon.lunariffic.com/~swstr0 and click About–>Sarah Weintraub, trying click the close link. Nothing happens and no errors either. So what to do? Here’s an example:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("li.btn-home a").click(function(){
        jQuery(this).parent.slideUp( "slow" );
        return false;
    });
});
</script>

Answer

Try like this,

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("a.close-con").click(function(){
        jQuery(this).parents("div#panel").slideUp( "slow" );
        return false;
    });
});
</script>

.parent() will traverse up only one level where as .parents() will traverse parents of parents

EDIT : Global selector [Requires jQuery 1.7+]

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("body").on("click","a.close-con", function(){
        jQuery(this).parents("div#panel").slideUp( "slow" );
        return false;
    });
});
</script>

Advertisement

Answer