asked on

How to expand / collapse an area on a webpage using HTML / CSS or ???

Does anyone know if there is a documented / standard practice for achieving the show / hide feature at the bottom of this webpage.

I'm curious how they're doing that.

http://www.dart.org/

Thanks in advance!
-Lance

ASKER CERTIFIED SOLUTION

jmnf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cslimrun

There is multiple plugins for jQuery that can accomplish with minimal code. Take a look at this:
http://www.adipalaz.com/experiments/jquery/expand.html

leakim971

jmnf is totally right, you just need jQuery slideUp and slideDown : http://jsfiddle.net/t5eps/

//-- HIDE/SHOW BOTTOM DIV FUNCTIONS
        $('#hideshowhide').click(function() {
            $('#bottom .container').slideUp(400, function() {
                $('#hideshowhide').addClass('hide');
                $('#hideshowshow').removeClass('hide');
            });
        });
        $('#hideshowshow').click(function() {
            $('#bottom .container').slideDown(400, function() {
                $('#hideshowshow').addClass('hide');
                $('#hideshowhide').removeClass('hide');
            });
        });

Open in new window

Jesse Matlock

Or, alternatively,. you can use jQuery's slideToggle function.. and display use a button that says 'show/hide' - this code will also work just as well using individual 'hide' and 'show' button images.

$('#button').click(function() {
  $('#slideMe').slideToggle('slow', function() {
    // Animation complete.
  });
});

Open in new window

This will accomplish the smooth sliding, without the added code weight :)