Question

I’ve been developing a menu for the past few days. It will serve as a expandable / collapsible (is that even a word?) menu. Right now I got the menu to be bigger vertically by default, then when you click the “+/-” button, the size decreases vertically. You click it again, then it gets bigger vertically.. etc.

Here is the JQuery part:

$(window).load(function() {
    $('.gh-gallink').toggle(function() {
        $('.gallery_container').animate({
            marginTop: "-60px",
            paddingTop: "75px",
            paddingBottom: "0px",
            height: "36px"
        }, 1000)
    }, function() {
        $('.gallery_container').animate({
            marginTop: "0px",
            paddingTop: "40px",
            paddingBottom: "0px",
            height: "100px"
        }, 1000);
    });
});

Here is the html for the toggle button:

< p class = "gallerylink" >
< a href="#" class="gh-gallink" title="Expand / Collapse Menu" >
    + / -
< /a >
< /p >

So right now, everything works great. The menu functions correctly and when you click “+/-” it either gets smaller vertically, or larger vertically. But, I would like the menu to show a “-” by deafult (since the menu is large by default). And then when you click the – sign and it gets smaller, I would like there to be a “+”. A fadein / fade out transition would be awesome as well.

Any help would be deeply appreciated! 🙂

Answer 1

Given that you’re directly changing the size with animate() simply chain the text() method following the animate() and explicitly define:

/* ...the animate stuff to make smaller...*/});
$(this).text('+');

/* ...the animate stuff to make larger...*/});
$(this).text('-');

JS Fiddle demo.