Show text on-click with transition


Joined
Feb 13, 2022
Messages
2
Reaction score
0
I have a simple button code to show text on-click. I cannot figure out, however, how to have it with a smooth transition. Any advice is appreciated.

<style>
.my-button {
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 20px;
margin: 100px 0 0 300px;
height: 35px;
width: 100px;
}

#Myid {
display: none;
font-size: 20px;
position: relative;
left: 200px;
top: 20px;
background-color: gray;
width: 300px;
text-align: center;
padding: 150px 0 150px 0;
transition: 10s;
}
</style>

<button class="my-button" onclick="toggleText()">button</button>
<div id="Myid">Text</div>

<div style="width: 100px; height: 100px; background-color: gray;">TEXT</div>

<script>
function toggleText(){
var x = document.getElementById("Myid");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
 
Ad

Advertisements

Joined
Mar 3, 2021
Messages
243
Reaction score
29
Sorry for the late reply! Instead of using display, try doing a transition on visibility and opacity.
HTML:
<html><head>
    <style>
    .my-button {
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 20px;
        margin: 100px 0 0 300px;
        height: 35px;
        width: 100px;
    }

    #Myid {
        visibility: hidden;
        opacity: 0;
        font-size: 20px;
        position: relative;
        left: 200px;
        top: 20px;
        background-color: gray;
        width: 300px;
        text-align: center;
        padding: 150px 0 150px 0;
        transition: visibility 0s, opacity 10s linear;
    }
    </style>
</head><body>
    <button class="my-button" onclick="toggleText()">button</button>
    <div id="Myid">Text</div>
    <div style="width: 100px; height: 100px; background-color: gray;">TEXT</div>

    <script>
    function toggleText(){
        var x = document.getElementById("Myid");
        if (x.style.visibility === "visible") {
            x.style.visibility = "hidden";
            x.style.opacity = 0;
        } else {
            x.style.visibility = "visible";
            x.style.opacity = 1;
        }
    }
    </script>
</body></html>
 
Ad

Advertisements

Joined
Feb 13, 2022
Messages
2
Reaction score
0
Sorry for the late reply! Instead of using display, try doing a transition on visibility and opacity.
HTML:
<html><head>
    <style>
    .my-button {
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 20px;
        margin: 100px 0 0 300px;
        height: 35px;
        width: 100px;
    }

    #Myid {
        visibility: hidden;
        opacity: 0;
        font-size: 20px;
        position: relative;
        left: 200px;
        top: 20px;
        background-color: gray;
        width: 300px;
        text-align: center;
        padding: 150px 0 150px 0;
        transition: visibility 0s, opacity 10s linear;
    }
    </style>
</head><body>
    <button class="my-button" onclick="toggleText()">button</button>
    <div id="Myid">Text</div>
    <div style="width: 100px; height: 100px; background-color: gray;">TEXT</div>

    <script>
    function toggleText(){
        var x = document.getElementById("Myid");
        if (x.style.visibility === "visible") {
            x.style.visibility = "hidden";
            x.style.opacity = 0;
        } else {
            x.style.visibility = "visible";
            x.style.opacity = 1;
        }
    }
    </script>
</body></html>
Thank you!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top