Zaloguj | Zarejestruj | FAQ
Anonymous

Need to display/hide text when clicked

+ Odpowiedz

Posty: 1 Strona 1 z 1


Need to display/hide text when clicked

przez NewbieX » Pn sie 14, 2017 4:24 pm

I am very new to coding. I revised a script I found on line but am struggling to get it to display the way I want. Please be patient if dumb question. I'm learning.

I am not sure how to modify the script to accomplish the following.
When webpage opens only this shows:

Click on links below to find the mayor of your city
States

When the user clicks on States, only this shows:

Select a State
Alabama
Texas
California

When the user clicks on Alabama only the following shows:

Select a City
Birmingham
Auburn
Montgomery

When the user clicks on Birmingham only the following shows:

The mayor of Birmingham Alabama is William Bell
Kod: Zaznacz cały
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p><b>Click on links below to find the mayor of your city</b></p>

<p id="demo" onclick="myFunction('myDIV')">States</p>
<div id="myDIV">
<p><b> Select a State</b></p>
<p id="demo" onclick="myFunction('myDIV2')">Alabama</p>
<p id="demo" onclick="myFunction(myDIV3')">Texas</p>
<p id="demo" onclick="myFunction(myDIV4')">California</p>
</div>
<div id="myDIV2">
<p><b>Select a City</b></p>
<p id="demo" onclick="myFunction('myDIV2A')">Birmingham</p>
<p id="demo" onclick="myFunction('myDIV2B')">Auburn</p>
<p id="demo" onclick="myFunction('myDIV2C')">Montgomery</p>
</div>
<div id="myDIV2A">
<p><b>The mayor of Birmingham Alabama is William Bell</b></p>
</div>

<script>
function myFunction(div) {
    var x = document.getElementById(div);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

</body>
</html>

Ideas?

Many thanks.
Avatar użytkownika

NewbieX

  • Posty: 1
  • Dołączył(a): Pn sie 14, 2017 4:15 pm


+ Odpowiedz

Strona 1 z 1