Jquery Toggle Single Div With Two Different Triggers

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

Solution 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.

Solution 2:

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><liclass="trigger">Trigger 1</li></ul><aclass="trigger">Trigger 2</a><divstyle="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');
    });
});​