Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2011-09-22
4
Medium Priority
?
292 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
4 Comments
 
LVL 4

Accepted Solution

by:
jmnf earned 2000 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 83

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

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

572 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