CODEWITHSUNDEEP
javascripthtml
FalsePride
FalsePride

Reputation: 63

HTML / JS - toggle show/hide with animation

My problem is that I need to make a toggle show/hide window but instead of display: none/block I need it to be bottom: 0px/300px so I can apply css transition to it.

can you guys find any solutions that will allow me to achieve the toggle function the way I want it?

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
} 
// So this is what I DO NOT want.
// I need it to use bottom:*value*
// instead of display:block/none

Upvotes: 0

Views: 2026

Answers (2)

Unmitigated
Unmitigated

Reputation: 89139

Just change the style property usages in the function from Element.style.display to Element.style.bottom.

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
}

You can simplify this function using a ternary operator:

function myFunction() {
    var x = document.getElementById("myDIV");
    (x.style.bottom === "0px")? x.style.bottom = "300px": x.style.bottom = "0px";
} 


html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}
<div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;">
Div
</div>
<button style="position: fixed;" onClick="myFunction()">Toggle Bottom Property of #myDiv</button>
<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
</script>

To add a transition for the bottom CSS property, just add transition: bottom 1s to the div so when the bottom property changes, it will start a transition lasting 1 second.

html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}

.animateBottom{
    transition: bottom 1s;
}
<div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;" class="animateBottom">
Div
</div>
<button style="position: fixed;" onClick="myFunction()">Toggle Bottom Property of #myDiv</button>
<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
</script>

Upvotes: 1

Adam Roberts
Adam Roberts

Reputation: 692

To further hev's answer, you could clear it up a little more by using the Javascript ternary operator (Unable to comment so adding here):

html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}

<div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;">
    Div
    </div>
    <button style="float: right;" onClick="myFunction()">
        Toggle Bottom Property of #myDiv
    </button>
    <script>
      function myFunction() {
          var x = document.getElementById("myDIV");
          x.style.bottom === "0px" ? x.style.bottom = "300px" : x.style.bottom = "0px";
          }
    </script>

Upvotes: 0

Related Questions