CODEWITHSUNDEEP
javascriptjqueryhtmlcssjsp
Moon Dong Song
Moon Dong Song

Reputation: 21

One div disappears, another div appears at the same time when click the button in CSS, JSP

I'm totally new to Web programming. I've just learned HTML and CSS, but have no any knowledge about Java Script.

Situation what i have is like this. There are two buttons and two divs. If one button is clicked, the div related in that button appears.(visibility:visible) And click same button one more, div is disappear. So now when I click buttons at once, two divs are overlapped.

Now I want to build an effect like this. If one button already clicked(one div is appeared already), and click another button then first div is disappeared and another div appear at the same time.(replace position)

    <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>

I'm totally toddler when it comes to Java Script. So I just copy&paste that script section. Can I get an appear/disappear effect fixing that script?

Upvotes: 1

Views: 1778

Answers (1)

Aftab Ahmed
Aftab Ahmed

Reputation: 1737

One possible solution is to show one dive and hide the second div.

function show1() {
    document.getElementById("div1").style.display = "block";
    document.getElementById("div2").style.display = "none";
}
window.onclick = function(event) {
    if (!event.target.matches('.button1'))
        var dropdowns = document.getElementsByClassName("div1_pop");
}
function show2() {
    document.getElementById("div1").style.display = "none";
    document.getElementById("div2").style.display = "block";
}
window.onclick = function(event) {
    if (!event.target.matches('.button2'))
    var dropdowns = document.getElementsByClassName("div2_pop");
}

</script>

Upvotes: 0

Related Questions