Hi all,

Does anyone have any pointers for creating a box with a minimize button, like when we click on the chat icon on the toolbar in Facebook? I'm not sure where to begin.



  • edited to make image smaller Tony Crockford over 7 years ago
  • Facebook, obviously did it! why not reverse engineer how they did it? Tony Crockford over 7 years ago

2 answers

danwellman 5600

This should be quite easy to acheive with jQuery or another framework; have a div shomewhere on the page set to height:10px or whatever height you want it to be when minimised, then use a click-handler and jQuery's animation method to adjust the height s that the box appears to slide up:

$("#div_id").click(function() {
  $(this).animate({ height: 200 }, "slow");

Set the height to whatever height it needs to be and the slow can be changed to normal or fast or an integer representing millisecond, e.g. 2000 for 2 seconds. Minimising it again is just as easy, have a link or something in the div which is hidden while it is minimised but visible when the div is 'open' and just set another click-handler for it:

$("minimise_button_id").click(function() {
  $(this).animate({ height: 20 }, "slow");

There may be times when you don't know the height it should be when maximised, in this situation you might be able to use the slideUp() method to open the div, it might be as easy as:

$("#div_id").click(function() {

But you'd need to have a play as this method can have different results depending on CSS styles. The CSS for the div that can be opened and closed would vary depending on your design/theme etc, but as long as it was positioned absolutely and had a higher z-index than the underlying content it should appear to float about the page :)

Hope this helps

Answered over 7 years ago by danwellman
  • Is it possible to achieve it without using js? Thanks handoyo over 7 years ago
  • no, not if you want to use the click event. You could do something on :hover *maybe* but it probably wouldn't work too well and would minimise again as soon as the cursor moved off it. Embrace JS, it is your friend :D danwellman over 7 years ago
  • The only way to do this effectively would be to use JS. You could have the majority of the block show up when you hover (with pure CSS), but you loose functionality. Nathan DeGruchy over 7 years ago
  • Are there any tutorial how to do it?The div and JS..Thanks.. handoyo over 7 years ago
  • I mean tutorial about creating the box.. ^_^ handoyo over 7 years ago

You could modify this to your needs;


Answered over 7 years ago by Paul@Rezolution
  • Thanks Paul.. ^_^ handoyo over 7 years ago