Question

I have two buttons and two hidden divs containing different information. I’m trying to work out how to make the content appear when one button is clicked (I’ve managed to get this working fine) and then if the other button is clicked, the old div hides again and the new one opens.

Essentially:

Click here for content A! Click here for content B!

When user clicks content A, content A appears.
When user clicks content A again, content A disappears.

When user clicks content B, content B appears.

User can also toggle. E.g have content A div open, click content B button and content B is then loaded but content A closes itself.

Here is the JS I’m using:

function ShowDiv() {
document.getElementById("myDiv").style.display = "";
}

function ShowDiv2() {
    document.getElementById("myDiv2").style.display = "";
    }

HTML

<input type="button" name="answer" onclick="ShowDiv()" />
<input type="button" name="answer2" onclick="ShowDiv2()" />

<div id="myDiv" style="display: none;">Hi I'm content a!</div>
<div id="myDiv2" style="display: none;">Hi I'm content B!</div>

At the moment both buttons display content correctly, but when you try to click the other nothing happens.

Answer 1

If you want a toggle functionality, it’s just simply changing display from “” to “none” and back:

function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
    document.getElementById("myDiv2").style.display = "none";
}

function ShowDiv2() {
    document.getElementById("myDiv2").style.display = "";
    document.getElementById("myDiv").style.display = "none";
}

Though I’d highly recommend using jquery library and it’s toggle function.