Solved

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

Posted on 2011-09-22
4
270 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

Independent Software Vendors: 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

Suggested Solutions

Title # Comments Views Activity
Video Tutorial help 2 38
Jquery 7 32
Duplicate Elements with JS / jQuery 3 24
Execute jQuery after Function 4 9
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

749 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