Question

I have limited knowledge of jQuery…I need help with this specific instance of a single div to be toggled when one of two triggers is clicked. The problem right now is that if one trigger is used, you have to click twice to get the other trigger to work.

Here is my jQuery:

jQuery(document).ready(function($) {

    jQuery(".move").toggle(function(){
        jQuery(".contact-container").slideDown('fast'); 
    }, function () {
        jQuery(".contact-container").slideUp('fast');
});

});

My HTML is roughly this:

<div class="contact-container"></div>
<ul>
    <li class="trigger"></li>
</ul>
<a class="trigger"></a>

If you would like to see this on the development site, you can view it here (triggers are the “contact” button in the upper-right corner and the “contact” link in the footer): Site Link

Answer 1

Not sure I get the question, and I have no intention of going through your wordpress site to look at code, but try :

$(document).ready(function() {
    $(".move").on('click', function(){
        $(".contact-container").slideToggle('fast'); 
    });
});

Should work fine if both trigger element has the class “.move”, otherwise just add that class to both trigger elements !

The reason it does’nt work now is because the toggle function keeps track of states for two different elements with the class “.move”, but does not know it the slided “.contact-container” element is visible or not. Using slideToggle instead will fix that.