Solved

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

Posted on 2011-09-22
4
276 Views
Last Modified: 2012-06-27
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
Comment
Question by:ZenQuest
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 4

Accepted Solution

by:
jmnf earned 500 total points
ID: 36583799
Javascript.

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

http://api.jquery.com/slideUp/
0
 
LVL 2

Expert Comment

by:cslimrun
ID: 36583818
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36583887
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
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 36719471
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question