DIV collapsing in reverse order from the bottom to the top

Looking for some help on how to create two links that, when clicked, will scroll a hidden <div> up to fill the full height of its parent container. I've been having trouble with the element using the full height of the <BODY> instead.

    html, body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #333;
      background: rgba(0, 109, 189, 1);
      height: 100vh;
      width: 100vw;
      font-family: Calibri, Calibri, Arial, Helvetica, sans-serif;
      font-size: 10pt;
      font-weight: bold;
    }
    p {
      padding: 10px;
    }
    ...

<!DOCTYPE html>
<html>

...
   </html>

If you have any suggestions on how to accomplish this effect, please share! Thank you!

jqueryhtmlcss

Answer №1

Kindly include this code in your CSS file

html, body {
    margin: 0 auto;
}

Answer №2

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#container{
    width:200px;
    height:600px;
    border:2px solid black;
    overflow:hidden;
}
#item1 {
    position:relative;
    background: #9a443d;
    width: 100%;
    height: 100%;
    float: left;
  }
  #item2 {
    position:relative;
    background: #3d9a44;
    width: 100%;
    height: 100%;
    float: left;
  }
#button1{
    background:green;
    height:30px;
    width:100px;
}
#button2{
    background:blue;
    height:30px;
    width:100px;
 }
</style>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
        if ( $( "#item1:first" ).is( ":hidden" ) ) {
            $( "#item2" ).slideUp( "fast" );
            $( "#item1" ).slideDown( "fast" );
        } else {
            $( "#item2" ).slideDown( "fast" );
            $( "#item1" ).slideUp( "fast" );
        }
    });
    $("#button2").click(function(){
        if ( $( "#item2:first" ).is( ":hidden" ) ) {
            $( "#item1" ).slideUp( "fast" );
            $( "#item2" ).slideDown( "fast" );
        } else {
            $( "#item1" ).slideDown( "fast" );
            $( "#item2" ).slideUp( "fast" );
        }
    });
});
</script>
</head>
<body>

<div id="xyz">Click on this paragraph.</div>

<div id="container">
    <div id="item1" hidden>Item1</div>
    <div id="item2" hidden>Item2</div>
</div>
<div id="button1">One</div>
<div id="button2">Two</div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

`The search bar and search button`

On mobile, I have a search field and a button working fine. However, when typing in something and hitting "search" on the phone's keyboard, it leads to a 404 error. But clicking the "search" button works as expected. I would like to be able to hit "se ...

phphtmlcss

Switching up the styles in PHP-embedded HTML by tweaking the CSS

I used PHP to create HTML elements by echoing them out, but I ran into an issue when trying to change the CSS for those HTML elements. Can you help me figure out how to do this? The PHP } else { include("steamauth/SteamCo ...

phphtmlcss

Display the website logo when users share on WhatsApp

My goal is to have my website icon appear in WhatsApp when I share it (similar to the example below). https://i.stack.imgur.com/KCWi8.jpg I initially tried using this code, but it didn't work: <link rel="shortcut icon" href="css/img/favicon/favi ...

htmlcsswhatsappico

Executing a Visual Basic subroutine from a jQuery dialog box

Currently, I have a form that includes a jQuery dialog creation. Within this dialog, there is a button generated from an ASP server control that should trigger a function in the code behind when clicked. However, I am encountering an issue where the functi ...

javascriptjqueryasp.netvb.net

Incapable of utilizing CSS Custom Properties (also known as CSS Variables) in conjunction with SASS @if Conditional Statements

I'm attempting to transfer CSS Custom Properties to a SASS Mixin. I can successfully use the variables directly in the desired styling. However, there seems to be a problem when utilizing a variable within an If statement. Here's an example of t ...

csssasscss-variablesscss-mixins

Unable to set width for td element in media query is not functioning as expected

Is there a way to adjust the width of td elements for smaller screens within an email template? I have tried setting the style as important, but it doesn't seem to be working. CSS .alignmentColumn { width: 25% !important; //for desktop @med ...

htmlcss

Navigate through input fields while they are hidden from view

Picture this scenario: <div> <input tabindex="1"> </div> <div style="display:none"> <input tabindex="2"> </div> <div> <input tabindex="3"> </div> As I attempt to tab through these input f ...

javascriptjqueryhtmlinputtabindex

Retrieve the nearest form field within the corresponding table

Within the same table, I have the following controls: <td> <asp:TextBox ID="tbOwnerSearchField" Text="Search..." ClientIDMode="Static" runat="server"></asp:TextBox> </td> <td> <input type="button" id="btnSearch ...

jqueryjquery-ui

Constructing a comprehensive inventory is a skill that requires strategy

Can someone advise on the best way to create a list structure with one parent category and two subcategories, each containing three items? Would it be ideal to use a combination of span and two uls, or perhaps a mix of span, anchor tags, and ul elements? ...

html

Update image source dynamically using AJAX and jQuery

Within my app, there exists a web page that contains numerous images with dynamically generated source URLs obtained by sending get requests to the rails server. Initially, these images are assigned a default source. Upon loading the page, another request ...

javascriptjqueryruby-on-railsajax

Angular2: using the #ngFor directive to assign a value to a component field

Here's a component I'm working with: @Component({ selector: "expenses-component", templateUrl: "expenses.html" }) export default class ExpensesComponent { private expenses: [] = [{name: "Foo", amount: 100}, {name ...

htmlangulartypescript

Expanding iFrame width in Drupal 7

I'm grappling with how to create a full-width page in my Drupal 7 website. This specific page contains an embedded form. Initially, there were two blocks on the page that I removed in hopes of getting the iframe to expand to fill the space. The cur ...

htmlcssiframedrupaldrupal-7

Is there a way to organize and streamline my repeated jQuery code by placing it within a subroutine or function

Being new to jQuery, I successfully created my first program using it. This program consists of hyperlinks on an image where clicking a word triggers jQuery code that changes the page's appearance and calls an Ajax routine for searching and displaying ...

jquery

Is there a way to utilize either css3 or css in order to change the icon displayed on a button

Currently, I am working on a button that contains a span element. I am interested in finding a way to change the background of the span when the button is clicked and have it remain changed. Is there a way to achieve this using CSS only? I am aware that ...

htmlcss

The continual appearance of "No file found" persists when utilizing the $redirectRoute

My goal is to make one of the links on my website lead to another page within the site. Below is one of the two links found on my index.html page: <html ng-app="myApp"> . . . <body> <h1>My Home Page</h1> ...

javascripthtmlangularjsngrouteroute-provider

Radio buttons with multiple levels

Looking to implement a unique two-level radio button feature for a specific option only. Currently, I have written a logic that will display additional radio buttons under the 'Spring' option. However, the issue is that when it's selected, t ...

javascripthtmlangulartypescriptangular6

Activate Jquery to display the submenu when clicked and conceal any other open submenus at the same time

I'm trying to create a responsive menu with menus and submenus using JQuery. However, as a newbie to JQuery, I'm struggling to hide a previous submenu when displaying another one. Here's the CodePen link Below is the HTML code: <nav cl ...

javascriptjqueryhtmlcss

How can you switch alignment from left to right when the current alignment settings are not functioning as expected in HTML?

I need the buttons +, count, and - to be right-aligned on my page. The numbers on the right are taking up the same amount of space, while the names on the left vary in length. I want the buttons to always remain in the same position, regardless of the name ...

htmlcssangularstyles

Transitioning into a fade out effect using CSS

I successfully created a modal using CSS and jQuery. The fade in transition works perfectly, but I'm having trouble implementing a transition for when it fades out and scales back to 1.4. The main issue is that the modal disappears too quickly. Chec ...

jquerycss