Is it possible to create a fading effect for text when a button is clicked? Currently, my code displays some text as block while hiding the rest with display:none.
Take a look at my JavaScript 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 its 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 its 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 its value
document.getElementById('TogetherText').style.display = 'block'
document.getElementById('PowerAppsText').style.display = 'none'
document.getElementById('streamOpsText').style.display = 'none'
})
</script>
Check out my CSS code:
`#streamOpsText { display: none; }
#TogetherText { display: none; }`