I've recently implemented a small box on my website at the bottom of the page to expand when the mouse hovers over it... This is the code and it all works great.

CSS

#box{
    position:absolute;
    width:300px;
    height:20px;
    left: 33%;
    right: 33%;
    min-width: 32%;
    bottom:0;
    background-color: #353535;
}

javascript

$('#box').hover(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

But I'm curious about how I would go about changing this to open and close on a click rather than the mouse hovering over it?

I've edited it to...

$('#box').click(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

And this works to open the box. But I can't get it to close again with another click.

So close yet so far! :P

I've recently implemented a small box on my website at the bottom of the page to expand when the mouse hovers over it... This is the code and it all works great.

CSS

#box{
    position:absolute;
    width:300px;
    height:20px;
    left: 33%;
    right: 33%;
    min-width: 32%;
    bottom:0;
    background-color: #353535;
}

javascript

$('#box').hover(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

But I'm curious about how I would go about changing this to open and close on a click rather than the mouse hovering over it?

I've edited it to...

$('#box').click(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

And this works to open the box. But I can't get it to close again with another click.

So close yet so far! :P

• javascript
• jquery
• popup
• click
• hover

Share Improve this question Follow edited Feb 9, 2011 at 12:58 000 28011 gold badge22 silver badges1111 bronze badges asked Feb 9, 2011 at 10:55 FlickdrawFlickdraw 68377 gold badges1414 silver badges2525 bronze badges 2

• What library are you using? Is it possible that the hover function expects two parameters and the click function expects only one? – awm Commented Feb 9, 2011 at 11:00
• I see you've now added the jQuery tag... good! – awm Commented Feb 10, 2011 at 7:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

this should work

$('#box').toggle(function() {
    $(this).animate({
        height: '220px'
    }, 150);
},function() {
    $(this).animate({
        height: '20px'
    }, 500);
});

You can probably just use the toggle event handler instead of the click event like so:

$('#box').toggle(function() {...}, function() {...});

You can do:

$('#box').click(function() {
  if ($(this).is(':visible')) {
    $(this).hide();
    return;
  }

  $(this).animate({height: '220px'}, 150);
});

On the click, it will hide the element if visible else animate it.