I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function. I want a multiple click action:

First click: Div/Map gets 100px higher Second click: Div/Map gets another 100px higher Third click: Div/Map gets 100px smaller, Fourth click: Div/Map gets another 100px smaller and returns to its original height.

Fifth click: All the previous action should be repeated.

This is what I've got up till now, but After my fourth click nothing happens anymore:

    $(function(){
        var hits = [0]; 
$('.kaart-uitklappen').click(function(){...

Fiddle Demo

I have a searchbar and the results should be shown on google maps. I want to expand and collapse this map so more results will be visible. But I dont want a normal toggle function. I want a multiple click action:

First click: Div/Map gets 100px higher Second click: Div/Map gets another 100px higher Third click: Div/Map gets 100px smaller, Fourth click: Div/Map gets another 100px smaller and returns to its original height.

Fifth click: All the previous action should be repeated.

This is what I've got up till now, but After my fourth click nothing happens anymore:

    $(function(){
        var hits = [0]; 
$('.kaart-uitklappen').click(function(){...

Fiddle Demo

• javascript
• jquery

11 Answers 11

You don't need as many animate calls, as you basically just change the height modifier. As there are four states essentially (two for going up, two for going down), you need to reset the counter accordingly (i.e., when it reaches 4) - that's done easily with modulo operator.

$(function(){
    var hits = -1; 
    $('.kaart-uitklappen').click(function(){ 
        hits = (hits+1) % 4;
        var modifier = hits > 1 ? '-' : '+';
        $('#header').animate({height: modifier + '=100px' }, 300);
        return false;
    });
});

JSFiddle.

You need to make sure your value does not exceed 3, or nothing will happen on subsequent clicks. Also, you should start with your value equal to 0, not [0].

Here is some simplified code with these ideas incorperated: http://jsfiddle/XZ7mW/16/

var hits = 0; 
$('.kaart-uitklappen').click(function(){ 
    if  (hits < 2) 
        $("#header").animate({'height':'+=100px' }, 300);
    else
        $("#header").animate({'height':'-=100px' }, 300);
    hits = (hits + 1) % 4;
    return false;
});

change from hits == number to hits%4 == number

$(function () {
        var hits = 0;
        $('.kaart-uitklappen').click(function () {
            if (hits%4 == 0) {
                $("#header").animate({
                    'height': '+=100px'
                }, 300, function () {});
            }
            if (hits%4 == 1) {
                $("#header").animate({
                    'height': '+=100px'
                }, 300, function () {});
            }
            if (hits%4 == 2) {
                $("#header").animate({
                    'height': '-=100px'
                }, 300, function () {});
            }
            if (hits%4 == 3) {
                $("#header").animate({
                    'height': '-=100px'
                }, 300, function () {});
            }
            hits++;
            return false;
        });
    });

You need to reset your var to 0 once you get to 3 -

if (hits == 3)
{ 
    $("#header").animate({'height':'-=100px' }, 300, function() {});
    hits = -1;
}

You also shouldn't be using an array to store hits.

hits = [0]

should be

hits = 0;

http://jsfiddle/XZ7mW/10/

On the last if type in this

 $("#header").animate({'height': '-=100px'}, 300, function () {});
     hits = 0;//make hits 0
     return;//return so it doesnt add to hits
 }

DEMO

JAVASCRIPT :

$(function () {
    var hits = 0;
    $('.kaart-uitklappen').click(function () {
        if (hits == 0) {
            $("#header").animate({
                'height': '+=100px'
            }, 300);
        }
        else if (hits == 1) {
            $("#header").animate({
                'height': '+=100px'
            }, 300);
        }
        else if (hits == 2) {
            $("#header").animate({
                'height': '-=100px'
            }, 300);
        }
        else {
            $("#header").animate({
                'height': '-=100px'
            }, 300);
            hits = 0;
            return false;
        }
        hits++;
        return false;
    });
});

Fiddle : http://jsfiddle/XZ7mW/12/

Here you go : JSFiddle

$(function () {
    var hits = 0;
    $('.kaart-uitklappen').click(function () {
        if (hits == 0) {
            $("#header").animate({
                'height': '+=100px'
            }, 300, function () {});
            hits++;

        }
        else if (hits == 1) {
            $("#header").animate({
                'height': '+=100px'
            }, 300, function () {});
            hits++;

        }
        else if (hits == 2) {
            $("#header").animate({
                'height': '-=100px'
            }, 300, function () {});
            hits++;

        }
        else if (hits == 3) {
            $("#header").animate({
                'height': '-=100px'
            }, 300, function () {});
            hits = 0;
        }
        return false;
    });
});

You need to reset hits when it reaches 3

Assuming you want this to expand, contract and then re-expand:

var hits = [0]; should be var hits = 0; and you will need to test for hits > 3 and set it back to 0;

or use modulus arithmetic in your conditions:

http://jsfiddle/XZ7mW/19/

    $(function(){
        var hits = 0; 
        $('.kaart-uitklappen').click(function(){ 
            if  (hits % 4 == 0) {
                $("#header").animate({'height':'+=100px' }, 300, function() {});
            }
            if (hits % 4 == 1) { 
                $("#header").animate({'height':'+=100px' }, 300, function() {});
            }
            if (hits % 4 == 2) { 
                $("#header").animate({'height':'-=100px' }, 300, function() {});
            }
            if (hits % 4 == 3) { 
                $("#header").animate({'height':'-=100px' }, 300, function() {});
            }
            hits++;
            return false;
        });
});

Here's how I would do it:

var hits = 0;

$('.kaart-uitklappen').click(function () {
    if (hits < 2) 
        $("#header").animate({'height': '+=100px'}, 300);
    else 
        $("#header").animate({'height': '-=100px'}, 300);

    if (++hits == 4)
            hits = 0;
    return false;
});

http://jsfiddle/KX7aq/

Add this at the end to reset the counter:

if(hits==4) {
    hits=0;
}

http://jsfiddle/XZ7mW/7/

Can be something like this?

    var direction = "open";
        $('.kaart-uitklappen-button').click(function(){
            if (direction == "open"){
                $('.kaart-uitklappen').height($('.kaart-uitklappen').height()+100)

                if ($('.kaart-uitklappen').height() >= 200){
                    direction = "close";
                }
            }else{
                $('.kaart-uitklappen').height($('.kaart-uitklappen').height()-100)
                if ($('.kaart-uitklappen').height() <= 0){
                    direction = "open";
                }
            }   

I use kaart-uitklappen-button because you can't click the container if it is closed...