javascript - Need to display/hide Divs when clicked sequentially -
ii revised script found on line struggling display way want. not sure how modify script accomplish following.
when web page opens shows:
click on links below find mayor of city states
when user clicks on states, shows:
select state alabama texas california
when user clicks on alabama following shows:
select city birmingham auburn montgomery
when user clicks on birmingham following shows:
the mayor of birmingham alabama william bell
<!doctype html> <html> <head> </head> <body> <p><b>click on links below find mayor of city</b></p> <p id="demo" onclick="myfunction('mydiv')">states</p> <div id="mydiv"> <p><b> select 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 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 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>
i write code you can use this, think goal learn how on own, im going try explain happening in type of code, , give understanding seem lacking in order make type of code. first off, class can have many of , id can have 1 of.
your code have id=demo on many lines, , not can do. must use class if have many of it. id selecting 1 specific item rest, id must unique. need give item id when need select specific item somewhere in code later on.
var mydiv = selectelementbyid("myuniquediv");
the code on live above select spesific div spesific id. mydiv variable kind of hold div now.
if say:
var alldivs = selectelemetnsbyclassname("mydivs");
i can select divs specific class name. alldivs variable holds sort of list of elements have selected.
elements can belong 1 or more clases, 1 element can use specific id.
when selecting elements inside other elements, paragraphs inside of div, can make variables , store first main div, use variable (that holds elements it) select further inside of it.
var citys = document.getelementbyid('citys'); // select main div citys.getelementsbytagname("p"); // selecting p elements in
you can set display or not. first can sett elements hidden, can display 1 of them clicked on.
citys.style.display = "none";
the line above hides p selected city div.
function myfunction(selectedcity){ document.getelementsbyid( selectedcity ).style.display = "block"; }
these last line uses id select specific city , makes visible. have in parenthesis in myfunction() declaration, here have selectedcity, becomes variable holds have give when called function. use select city want display.
suggestion: use drop downs lists this, in stead of hiding , un-hiding elements.
i hope explains code enough understand how write type of code on own.
Comments
Post a Comment