Question

I am teaching myself jquery it seems while working on this project.

I assumed that there would be a very simple way to implement this technique, but I have searched high and low with no luck. Here is there the page we are looking at:

http://igs.link-networkonline.com/campaign-landing-page/

The three pull up menus in the middle are what we are looking at. They are almost finished, I just need help fixing some bugs.

1. The div underneath the tabs slides down when the tab slides up. It is most likely because I am using negative positioning to more the menu up… I didn’t know what else to do!

2. If one is open, when you click another the first closes.

These questions are very close to complete, they just are not functioning the way a user would expect, and the code is getting rather bulky to keep in the header.

The problems that I am having now:

a. When one is open while a first is already open, it closes the first, but to negitive margin used on the bottom div gets increased by too much, resulting in the bottom div interfering with the above content.

b. After the initial open/close toggle, it takes 2 clicks to toggle it, resulting in the page feeling broken.

---

Updated code:

$(function() {
    $(".first").toggle(function() {
        $(".first").animate({'height': '295px', 'top': "-220px"});
        $('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".second").animate({'height': '75px', 'top': "0px"});
        $(".third").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-220px'});
        $(".form").animate({'margin-top': '-220px'});

    }, function() {
        $(".first").animate({'height': '75px', 'top': "0px", 'overflow': "hidden"});
        $('.first img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'})
        $(".form").animate({'margin-top': '0px'});

    });
   $(".second").toggle(function() {
        $(".second").animate({'height': '275px', 'top': "-200px"});
        $('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".first").animate({'height': '75px', 'top': "0px"});
        $(".third").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-200px'});
        $(".form").animate({'margin-top': '-200px'});

    }, function() {
        $(".second").animate({'height': '75px', 'top': "0px"});
        $('.second img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'});
        $(".form").animate({'margin-top': '0px'});
    });
    $(".third").toggle(function() {
        $(".third").animate({'height': '255px', 'top': "-180px"});
        $('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $(".first").animate({'height': '75px', 'top': "0px"});
        $(".second").animate({'height': '75px', 'top': "0px"});
        $(".campaign-lower").animate({'margin-top': '-180px'});
        $(".form").animate({'margin-top': '-180px'});

    }, function() {
        $(".third").animate({'height': '75px', 'top': "0px"});
        $('.third img').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        $(".campaign-lower").animate({'margin-top': '0px'});
        $(".form").animate({'margin-top': '0px'});
    });

}); 

Very grateful for any ideas or direction. Thanks you in advance for your knowledge!

Answer 1

A simple way to do this is to animate e.g. .second and .third on .first click to close, animate .first and .third to close on .second click and so on…

You could change the image with something like this:

$('.first img').attr('src','new_source.png');

Edit:

The bottom box will stay with this animate:
Note that it’s a really inelegant way of solving this, but it works:

    $(".first").toggle(function() {
            $(".first").animate({'height': '270px', 'top': "-220px"});
            $(".second").animate({'height': '50px', 'top': "0px"});
            $(".third").animate({'height': '50px', 'top': "0px"});
            $("#bottom").animate({'margin-top': '-220px'});
        }, function() {
            $(".first").animate({'height': '50px', 'top': "0px"});
            $("#bottom").animate({'margin-top': '0px'});
    });

Edit 2:

This should work for you now:

var first = false;
var second = false;
var third = false;

    $(".first").click(function() {
        if(!first){
            first = true;
            second = false;
            third = false;
            $(".second").css({'margin-bottom': '0px'});
            $(".third").css({'margin-bottom': '0px'});
            $(".first").animate({'height': '295px', 'top': "-270px"},function() {
                $(".first").css({'margin-bottom': '-220px'});
            });
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button1").animate({'top': "-235px"});
            $("img.button2").animate({'top': "-25px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        } else if(first) {
            first = false;
            second = false;
            third = false;
            $(".first").css({'margin-bottom': '0px'});
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $("img.button1").animate({'top': "-25px"});
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        }
    });
   $(".second").click(function() {
        if(!second){
            first = false;
            second = true;
            third = false;
            $(".first").css({'margin-bottom': '0px'});
            $(".third").css({'margin-bottom': '0px'});
            $(".second").animate({'height': '295px', 'top': "-270px"},function() {
                $(".first").css({'margin-bottom': '0px'});
                $(".second").css({'margin-bottom': '-220px'});
                $(".third").css({'margin-bottom': '0px'});
            });
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button2").animate({'top': "-240px"});
            $("img.button1").animate({'top': "-25px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
        } else if(second) {
            first = false;
            second = false;
            third = false;
            $(".second").css({'margin-bottom': '0px'});
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $("img.button2").animate({'top': "-25px"});
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $("body").animate({'padding-bottom': '0px'});
        }
    });
    $(".third").click(function() {
        if(!third){
            first = false;
            second = false;
            third = true;
            $(".first").css({'margin-bottom': '0px'});
            $(".second").css({'margin-bottom': '0px'});
            $(".third").animate({'height': '295px', 'top': "-270px"},function() {
                $(".third").css({'margin-bottom': '-220px'});
            });
            $(".second").animate({'height': '75px', 'top': "-58px"});
            $(".first").animate({'height': '75px', 'top': "-58px"});
            $("img.button3").animate({'top': "-210px"});
            $("img.button1").animate({'top': "-25px"});
            $("img.button2").animate({'top': "-25px"});
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
            $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
         } else if(third) {
            first = false;
            second = false;
            third = false;
            $(".third").css({'margin-bottom': '0px'});
            $(".third").animate({'height': '75px', 'top': "-58px"});
            $("img.button3").animate({'top': "-25px"});
            $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
            $("body").animate({'padding-bottom': '0px'});
        }
    });

Note that this is not the way how to really solve something like this, but it works..