I am brand new to Web programming. I have just grasped the concepts of HTML and CSS, but Java Script is still a mystery to me.
The scenario I am facing is as follows - there are two buttons and two divs. When one button is clicked, the corresponding div appears (visibility:visible). Clicking the same button again will make the div disappear. However, if I click both buttons simultaneously, the two divs overlap each other.
Now, I am looking to create an effect where if one button is already clicked (one div is visible), and then another button is clicked, the first div disappears and the other div appears in its place at the same time.
<script>
function show1() {
document.getElementById("div1").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.button1'))
var dropdowns = document.getElementsByClassName("div1_pop");
}
function show2() {
document.getElementById("div2").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.button2'))
var dropdowns = document.getElementsByClassName("div2_pop");
}
</script>
Java Script is still a challenge for me, so I simply copied and pasted this script section. Can someone help me achieve the desired appear/disappear effect by fixing this script?