Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

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
0
ZenQuest
Asked:
ZenQuest
1 Solution
 
jmnfCommented:
Javascript.

Using jQuery with slide up, slide down, etc. animations.

http://api.jquery.com/slideUp/
0
 
cslimrunCommented:
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
0
 
leakim971PluritechnicianCommented:
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

0
 
Jesse MatlockUX EngineerCommented:
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 :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now