jQuery toggle single div with two different trigge

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

First, the fiddle.

You can use jQuery's .toggle() method to do this. It will automatically show or hide the element as necessary.

You can also set the click handler by class rather than by specific ID. That way whenever any element with that class (in my example below, I used toggle-button) it will call the click handler function.

Update: I changed my example to match the sample code you posted above.

<ul>
    <li class="trigger">Trigger 1</li>
</ul>
<a class="trigger">Trigger 2</a>

<div style="height: 400px; width: 400px; background-color:red;" class="contact-container"></div>

​

$(document).ready(function() {
    $('.trigger').on('click', function(e) {
       e.preventDefault();
        $('.contact-container').slideToggle('fast');
    });
});​

Answer 2

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.