javascript - A way to hid a div when another div is open -
I have two divs
, unless the button is clicked, only one The problem is I do not want to show them both at the same time.
& lt; Div id = "SearchAddParams" class = "hidden" style = "color: orangered" & gt; & Lt; Label = 'txt search' for & gt; Road Number: & lt; / Labels & gt; & Lt; Input type = 'text' id = 'txtStreetNum' / & gt; & Lt; Label = 'txt search' for & gt; PREDISEER: & lt; / Labels & gt; & Lt; Input type = 'text' id = 'txtPreDir' / & gt; & Lt; Label = 'txt search' for & gt; Preetype: & lt; / Labels & gt; & Lt; Input type = 'text' id = 'txtPreType' / & gt; & Lt; Label = 'txt search' for & gt; Road name: & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtStreetName' / & gt; & Lt; Label = 'txt search' for & gt; Suff dhether & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtSufDir' / & gt; & Lt; Input type = 'button' id = 'btn search' onclick = 'searchAddress ()' value = 'search' /> & Lt; Input type = 'button' id = 'reset' onclick = 'resetbutton ()' value = 'reset' /> & Lt; / Div & gt; & Lt; Div id = "SearchParParams" class = "hidden" style = "color: orange" & gt; & Lt; Label = 'txt search' for & gt; Parcel ID: & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtParcelID' / & gt; & Lt; Label = 'txt search' for & gt; Owner: & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtOwner' / & gt; & Lt; Label = 'txt search' for & gt; Owner Addr: & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtOwnerAddr' / & gt; & Lt; Label = 'txt search' for & gt; Quick RefID: & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtQuickRefID' / & gt; & Lt; Label = 'txt search' for & gt; Section Township: & lt; / Label & gt; & Lt; Input type = 'text' id = 'txtSectTwn' / & gt; & Lt; Input type = 'button' id = 'btn search2' onclick = 'searchParcels ()' value = 'search' /> & Lt; Input type = 'button' id = 'reset2' onclick = 'resetbutton2 ()' value = 'reset' /> & Lt; / Div & gt;
I am using these divs to hide
function (divID) {var item = document.getElementById (divID); If (item) {item.className = (item.className == 'hidden')? 'Unhind': 'hidden'; }}
Is there a way to hide a div when the second is clicked, so I keep opening both the devices at once!
Any help would be greatly appreciated
You add a common square Divs that are toggleable and use that class to hide for everyone to choose.
html
& lt; Div id = "SearchAddParams" class = "hidden group" style = "color: orange" & gt; ... & lt; / Div & gt; & Lt; Div id = "SearchParParams" class = "hidden group" style = "color: orange" & gt; ... & lt; / Div & gt;
Display JavaScript ( jquery )
function (divID) {var group = $ ('.group'), target = group.filter ('#' + divId); If (target.length) {group.removeClass ('unhade'). AddClass ('hidden'); Target.addClass ('hidden') removeClass ('hidden'). }}
Comments
Post a Comment