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

javascript implementing number formatting during keyup event

When I try to format a number in an input field on the keyup event, I receive a warning in my browser console that says "The specified value "5,545" cannot be parsed, or is out of range." The value in the input field also gets cleared. How can I solve this ...

javascripthtmljquery

Angucomplete-alt fails to display dropdown menu

On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...

javascripthtmlangularjs

Utilize jQuery to extract information from a webpage and retrieve a JSON object

Looking to extract specific JSON data from a webpage on the same domain that is nested inside a <script> tag with a unique id. <div id="someID"> <script type="text/json" id="scriptID"> { "some more here": "and there", ...

jqueryajax

Struggling to unlock the mystery of a jammed trigger box

I'm currently working on implementing a small 'trigger box' that will expand upon clicking. It was functional before, but it seems to be encountering an issue now and I'm unsure of the cause. While I have some understanding of HTML and ...

javascriptjqueryhtml

What is the best way to retrieve the second element based on its position using a class name in Jquery?

DisablePaginationButton("first"); The statement above successfully disables the first element that is fetched. DisablePaginationButton("second"); ===> not functioning function DisablePaginationButton(position) { $(".pagination a:" + position).ad ...

javascriptjquery

Implementing Sass mixin transition to specifically add transition-delay - a comprehensive guide

As I continue to enhance my front-end development skills and practice Sass to optimize my CSS code, I encountered a roadblock. After exploring resources and tutorials online, I created a global mixin in Sass named 'transition'. Here is the code: ...

csssasscss-transitions

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

javascripthtmlcss

Display a pleasant alert message when the file is not recognized as an image during the loading

Is there someone who can assist me? I have attempted multiple times but without success. How can I display a sweet alert when a file is selected that is not an image? <input type ="file" /> ...

javascripthtml

Utilize strings as variables within SASS code

In my project, I have defined two variables called $person-color and $animal-color in a separate file named variables.scss. Now, I want to use these variables in my main stylesheet main.scss. The desired outcome is to have the following CSS styles applied ...

csssass

retrieve a reply from a PHP script and incorporate it into JavaScript following an AJAX request

I've been working with an ajax call and everything seems to be running smoothly thanks to this script: $(document).ready(function() { $('.sortable').sortable({ stop: function(event, ui) { $(ui.item).effect("highlight"); ...

javascriptphpjqueryajax

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

Leveraging PHP's PDO with MySQL in combination with the power of JQuery

Hey there, I'm dealing with a login form that includes fields for both username and password. I have a PHP backend script that properly processes the data and encodes the response in JSON format. However, my JQuery JS script utilizing Ajax doesn&apo ...

phpjquerymysqlajaxpdo

Moving a mouse from one element to another does not reset its state

Link to code: https://codesandbox.io/s/objective-darwin-w0i5pk?file=/src/App.js Description: There are four gray squares in this example, each with a different shade of gray. The goal is to change the background color of each square when the user hovers o ...

htmlcssreactjsjsx

Updating and showing a variable in a PHP file using JavaScript within an HTML webpage

My goal is to establish a variable in a PHP file on my server named "likes." Subsequently, I wish to incorporate a like button on my HTML webpage that, when clicked, will utilize JavaScript to modify the "likes" variable in the PHP file and increase it by ...

javascriptphphtmlvariables

problem with css3 webkit transform rotation

After using jQuery to append my signpost div to the DOM, I encountered an issue where its width and height were not being affected by webkit transforms. When I removed the transforms, the div displayed correctly. My goal is to append the div and then anima ...

jquerycsstransformrotatetransform

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

I am working on creating a unique table layout for a web page that resembles the design linked below: Click here to view the image http://kelostrada.pl/upload/test.png Your assistance in achieving this would be greatly appreciated. Currently, I have imp ...

htmlcsscross-browserhtml-table

Image Not Displayed on Page

I am facing an issue where I have a div class 'breadcam_bg' with an image url, but the image is not being displayed on the page even though the console detects the div. html <div class="bradcam_area breadcam_bg"> This div! & ...

htmlcsssass

Customize Your Wordpress Category Title with a Background Image

Within my wordpress template, there is a module known as new_boxs. The code snippet below shows that this module displays on the page six times, with two columns wide and three rows down: foreach($data_cat as $cat){ ?> <div class="span6"> ...

phpcsswordpress

Difficulty maintaining consistent line widths while setting up a CSS border grid on a table

What is the most effective method for creating a table with a 1px grid (internal and external)? Could it be possible that Chrome and Edge have issues with borders in certain scenarios? On this Codeply example, the standard approach is taken - setting bord ...

htmlcsshtml-table

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss