One function to rule multiple buttons, and then some

Question

I have 7 buttons. They are distributed on top of a background image and interacting with it. They are placed absolutely. I have created a jQuery function to animate one of the buttons height. The button expands upwards. Check it out here: http://hdpano.no/bf/newindex.html and click the top left button named Deck 8.

I wish this function to handle all the buttons, but there are some variables. The baseline of each button varies, and i need to subtract from it as i expand the height. I also wish to close any other open button if one clicks another.

Here is the jQuery code:

jQuery(document).ready(function() {

$('#link8').toggle(
function()
{
  $('#deck8').animate({height: "25px",top:"202"}, 500);
},
function()
{
$('#deck8').animate({height: "150",top:"76"}, 500);

});

});

The function is quite basic and I have stripped it of all my attempts to make it work with the other buttons.

Answer 1

This does what you're looking for. Replace the code in your page with this...

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('.link').click(function() {
            var $me = $(this);
            if ($me.height() == 150) {
                $me.animate({height: "25px",top:"+=126"}, 500);
            } else {
                $(".link").each(function() {
                    if ($(this) != $me) {
                        if ($(this).height() == 150) {
                            $(this).animate({height: "25px",top:"+=126"}, 500);
                        }
                    } 
                });
                $me.animate({height: "150px",top:"-=126"}, 500);
            }
        });
    });
</script>

You can toggle the position with += and -= so it uses relative positioning, rather than absolute positioning, so that code affects all the divs on the page with class "link".