Jquery toggle using 2 elements

Question

this is my script, I'm using a toggle so I can animate a sliding menu.

    $("div.show-menu").click().toggle(
        function() {
            // first alternation
            $("#slideover").animate({
                right: "512px"
                }, 300);
            $(".menu-button").html('close menu');


        }, function() {
            // second alternation
            $("#slideover").animate({
                right: "0"
                }, 300);
            $(".menu-button").html('open menu');

    });

Though I really need the toggle to work using 2 elements on the page. For example see below...

<div class="show-menu one">open menu</div> // this is element one

<div class="show-menu two">open menu</div> // this is element two

I need it so, if element one get's click first, you can close the menu using element two on the first click. What is happening now is that you have to click element two twice in order for it to close the menu - vice versa

I guess this is the toggle coming into play, any help would be great thanks.

Cheers Josh

so your saying. If element one is shown then if you click the 2nd menu it closes the first element and then triggers the 2nd element to be shown and vice versa — Richard Banks, Nov 11 '11 at 17:46
`.toggle` only accepts one callback function, not two: http://api.jquery.com/toggle/ — Blazemonger, Nov 11 '11 at 17:47

score 1 · Accepted Answer · answered Nov 11 '11 at 17:46

1

$('.show-menu').on('click', function () {

    //check the state of the .menu-button, if it's closed then run the open animation, if it's open then run the close animation
    if ($(".menu-button").html() == 'close menu') {
        $("#slideover").animate({
            right: "0"
        }, 300);
        $(".menu-button").html('open menu');
    } else {
        $("#slideover").animate({
            right: "512px"
        }, 300);
        $(".menu-button").html('close menu');
    }
});

.on() is new in jQuery 1.7 and replaces .bind() in this instance, if you are using jQuery < 1.7 then use .bind().

answered Nov 11 '11 at 17:46

Jasper

75,717
14
151
146

this looks promising but I can't get to work - i'm trying to get the jist of it but can get it run any animation. I wrote my html incorrecty, I wonder if thats why. My buttons actually look like this... `
open menu
// this is element one` `
open menu
// this is element two` – Joshc Nov 13 '11 at 18:13
Sorry did it wrong again. `
open menu
// this is element one` `
close menu
// this is element two` – Joshc Nov 13 '11 at 18:18
It worked - I had not yet updated to jquery 1.7.0 - Thanks a million dude! – Joshc Nov 13 '11 at 18:44

score 0 · Answer 2 · answered Nov 11 '11 at 17:50

0

What about

$('.show-menu').on('click', function () {
    if ($("#slideover").css("right") == '512px') {
        $("#slideover").animate({
            right: "0"
        }, 300);
        $(".menu-button").html('open menu');

    } else {
        $("#slideover").animate({
            right: "512px"
        }, 300);
        $(".menu-button").html('close menu');
    }
});

answered Nov 11 '11 at 17:50

Richard Banks

2,946
5
34
71

again looks promising but isnt running the animation at all. I did post up the mark up wrong tho - though I'm not sure if that's the problem, theres no errors, just not animating on click. `
open menu
// this is element one
close menu
// this is element two` – Joshc Nov 13 '11 at 18:22
I had not updated to jquery-1.7 - updated and the above code worked. But your code weirdly did not?? Logically I can't see why it doesnt. Thanks anyway dude – Joshc Nov 13 '11 at 18:46

Jquery toggle using 2 elements

2 Answers2