Question

I am using the following click function to close a contact form and toggle a class on the links on my nav bar:

<script type="text/javascript">
$(document).ready(function(){
    $("#home").click(function(){
        $("#panel").slideUp("slow");
        $(this).toggleClass("current");
        $("#contact").toggleClass("current");
        return false;
    });
});
</script>

You can see the script in action on this page. The trouble is that I only want to toggle the class on the contact link if the contact form is open (i.e. the div is showing at the top of the page). How would I add an if clause to the script along the lines “if #panel is open run toggleClass on #contact?

Thanks,

Nick

Answer 1

Instead of toggling the class, you can set and remove the class. By logic, when you click at the a#home link, the link should get the current class, and the #contact element should not have the current class any more.

$(this).addClass("current");
$("#contact").removeClass("current");

If you want to not execute the function when the form is invisible, use:

$("#home").click(function(){
   if(!$('#panel').is(':visible')) return;
   //Rest of code