How do I make it so that the text fades in when I have clicked the button. My code is currently set up so that some text is set to display:block while the rest are hidden with display:none.

Here is my JS code:

<script>

    //Select button by id
    const btn1 = document.getElementById('PowerApps');
    //Add on click listener for button
    btn1.addEventListener('click', function() {
        //Select (h1) heading by id, and then change it's value
        document.getElementById('PowerAppsText').style.display = 'block'
        document.getElementById('streamOpsText').style.display = 'none'
        document.getElementById('TogetherText').style.display = 'none'
    })

    //Select button by id
    const btn2 = document.getElementById('streamOps');
    //Add on click listener for button
    btn2.addEventListener('click', function() {
        //Select (h1) heading by id, and then change it's value
        document.getElementById('streamOpsText').style.display = 'block'
        document.getElementById('PowerAppsText').style.display = 'none'
        document.getElementById('TogetherText').style.display = 'none'
    })

    //Select button by id
    const btn3 = document.getElementById('Together');
    //Add on click listener for button
    btn3.addEventListener('click', function() {
        //Select (h1) heading by id, and then change it's value
        document.getElementById('TogetherText').style.display = 'block'
        document.getElementById('PowerAppsText').style.display = 'none'
        document.getElementById('streamOpsText').style.display = 'none'
    })


</script>

Here is my CSS code:

`#streamOpsText { display: none; }

#TogetherText { display: none; }`

CodePudding user response：

Important note;

display:none; and display: block; set whether or not the element 'exists', and should be read out or not.

Setting an element to display:none; doesn't just make it invisible, it functionally removes it (and all the place it takes up) from the DOM.

I'd suggest going for visibility instead of display, and/or fading in by transitioning the opacity.

Keep in mind; with visibility set to hidden (or opacity to 0), the element is not visible but it will still take up its full width and height.

Set these to 0 and size them along with the opacity transition.