vendredi 18 septembre 2015

3 Button showing and hiding text for HTML

I have been trying to figure this out for like the last hour and a half. Someone please help me figure out the logic behind this. So this is what I want to do. There are three buttons, let's call them, button 1, button 2, and button 3 and three texts, text 1, text 2, and text 3. And each text is right under the buttons. So, text 1 is directly under button 1, text 2 is directly under button 2... And to begin, none of the texts are showing, they are all hidden. And if you click on a button a button, the respective text shows. And at most, only 1 text show be showing at a given time (so there can be a time when no texts are showing). So..

If none of the buttons are clicked, and I click button 1, I want only text 1 to show (so text 2 and 3 are hidden). And if I click button 2, only text 2 should show (text 1 and 3 are hidden). Now, this is the part that I can't figure out. If text 1 is the only text that is showing, and you click button 1, that should hide text 1. And when this happens none of the texts should be showing. Does anybody have a solution to this problem?

var show1 = false; 
var show2 = false;
function showDearPresidentText() {
    if(show1 == false && show2 == false) {
        document.getElementById("text1").style.display="block";
        document.getElementById("text2").style.display="none";
        show1 = true; 
    }
    else if(show1 == true && show2 == false) {
        document.getElementById("text1").style.display="none";
        document.getElementById("text2").style.display="none";
        show1 = false; 
    }
    else if(show1 == false && show2 == true) {
        document.getElementById("text1").style.display="block";
        document.getElementById("text2").style.display="none";
        show1 = true; 
    }
}
function showDearReaderText() {
    if(show1 == false && show2 == false) {
        document.getElementById("text1").style.display="none";
        document.getElementById("text2").style.display="block";
        show2 = true; 
    }
    else if(show1 == true && show2 == false) {
        document.getElementById("text1").style.display="none";
        document.getElementById("text2").style.display="block";
        show1 = true; 
    }
    else if(show1 == false && show2 == true) {
        document.getElementById("text1").style.display="block";
        document.getElementById("text2").style.display="block";
        show1 = false; 
    }
}

So I tried to do this just with 2 buttons. Couldn't figure it out. If I couldn't do it with 2, then I probably can't do it with 3.




Aucun commentaire:

Enregistrer un commentaire