What are the steps for creating a div with a partially hidden element?

Question

What are the steps for creating a div with a partially hidden element?

Is it possible to create a partially visible div on a webpage, similar to a footer, that slides up when clicked? This div will contain important information.

I have managed to achieve this to some extent, but the issue I am facing is that the div doesn't actually get hidden, rather it just changes its position.

You can view the demo by visiting: http://jsfiddle.net/8ZFMJ/394/

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": -430});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": "-200px"});
    }
});

javascript jquery html css

Answer 1

Answer №1

A while ago, I encountered a similar issue which prompted me to ask my first question on StackOverflow. Unfortunately, the response was not very positive.

The issue at hand is that simply changing the position of the div by using ".bottom" is not enough. It seems what you really want to do is adjust the height instead. You can refer to this JSFiddle where I successfully switched the div between states (although without any animation yet).

This solution involves utilizing CSS's "overflow-y: hidden;" to conceal the contents of the div when it's small. The JavaScript code toggles between two different heights:

if(clicked)
{
    $(".two").css("height", 10);
}
else
{
    $(".two").css("height", 250);
}
clicked = !clicked;

The line clicked = !clicked simply changes the boolean state of the variable.

To incorporate animation, we can use jQuery's ".animate" method and create this visually appealing Fiddle.

In essence, all we had to do was replace the css with animate to achieve the desired effect. Pretty straightforward, right?

TL;DR
Check out the final version of the JSFiddle here.

Answer 2

A while ago, I encountered a similar issue which prompted me to ask my first question on StackOverflow. Unfortunately, the response was not very positive.

The issue at hand is that simply changing the position of the div by using ".bottom" is not enough. It seems what you really want to do is adjust the height instead. You can refer to this JSFiddle where I successfully switched the div between states (although without any animation yet).

This solution involves utilizing CSS's "overflow-y: hidden;" to conceal the contents of the div when it's small. The JavaScript code toggles between two different heights:

if(clicked)
{
    $(".two").css("height", 10);
}
else
{
    $(".two").css("height", 250);
}
clicked = !clicked;

The line clicked = !clicked simply changes the boolean state of the variable.

To incorporate animation, we can use jQuery's ".animate" method and create this visually appealing Fiddle.

In essence, all we had to do was replace the css with animate to achieve the desired effect. Pretty straightforward, right?

TL;DR
Check out the final version of the JSFiddle here.

Answer 3

Answer №2

.two should be positioned absolutely within the .container element, which should have a relative position. By adjusting the bottom property to a negative value, you can hide the footer.

CSS:

html, body { height: 100%; }
.container {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.two {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height:250px;
    bottom: -200px;
    transition: bottom 1s;
}

jQuery:

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": "-200px"});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": 0});
    }
});

http://jsfiddle.net/8ZFMJ/398/

Answer 4

.two should be positioned absolutely within the .container element, which should have a relative position. By adjusting the bottom property to a negative value, you can hide the footer.

CSS:

html, body { height: 100%; }
.container {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.two {
    position: absolute;
    background-color: yellow;
    width: 100%;
    height:250px;
    bottom: -200px;
    transition: bottom 1s;
}

jQuery:

var clicked=false;
$(".two").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": "-200px"});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": 0});
    }
});

http://jsfiddle.net/8ZFMJ/398/

What are the steps for creating a div with a partially hidden element?

Answer №1

Answer №2

Similar questions

Generating output into several spans of identical class using JavaScript with compatibility for IE8

ASP.NET Core Ajax response is empty

Troubleshooting problem: AJAX autocomplete URL returning XML

As the div elements stack up and you scroll towards the top or bottom

Create a choppy distortion effect using CSS filters in Google Chrome

What is the best way to compare the lengths of all nested child elements with each other?

`After compilation, the Material UI component `theme.spacing` was not found in the definition

Retrieving information from a nested .then callback

What could be causing the updated JavaScript file to not run on a live Azure website using ASP.NET MVC?

What is the best way to monitor a document variable that is set after a component has been

What is the method for showcasing an array using AngularJs in my specific scenario?

Differences in rendering of HTML select element between Chrome on macOS and Chrome on Windows

Ways to trigger an alert once a div is fully loaded with content

Discovering the 3D coordinates of a point that is perpendicular to the midpoint of a line

Option and Select elements in iOS have unique font sizes

The jQuery Deferred feature on Ajax is failing to properly pass the array in the data option as an array, instead converting

Exploring the functionality of Angular directives for bidirectional data binding with object references

What sets apart the usage of <center> from CSS?

What could be causing the error "styled is not defined as a function" while creating my component library using Rollup?

Tips for locating an element within pre-processed HTML content