Show text on-click with transition

Mcara · Feb 14, 2022

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>

CodeMonkeyJ · Feb 25, 2022

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>

Mcara · Feb 28, 2022

CodeMonkeyJ said:

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!

Why is the e.target not working here?	1	Dec 29, 2022
Help me sort out this script	1	Oct 17, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Please Help?	0	Jul 23, 2022
Image on header	2	May 2, 2024

Show text on-click with transition

Mcara

CodeMonkeyJ

Mcara

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads