JS Toggle show only clicked one and hide all others
Question
I just found this helpful JS Toggle.. Is it possible to modify this one? I just want to show the actual selected one and hide all others..
<script type="text/javascript">
function toggle(control){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
}
</script>
<a href="javascript:toggle('test')"> link</a>
<br /><div id="test" style="display: none">text</div>
1 answers
solution1
0 ACCPTED 2014-03-25 10:07:55
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script>
function show(idToShow, classToHide) {
var classList = document.querySelectorAll('.'+classToHide);
var thisElem = document.getElementById(idToShow);
var wasShown = (thisElem.style.display == "block");
var i = -1;
while (node=classList[++i]) {
node.style.display ="none";
};
if(!wasShown){
thisElem.style.display = "block";
}
}
</script>
</head>
<body>
<div onclick="show('a','all');">A
<div class="all" id="a" style="display:none">The stuff to show</div>
</div>
<div onclick="show('b','all');">B
<div class="all" id="b" style="display:none">The stuff to show</div>
</div>
<div onclick="show('c','all');">C
<div class="all" id="c" style="display:none">The stuff to show</div>
</div>
</body>
</html>
It was a fight to get IE 8 support, document.getElementsByClassName was not supported in that version. It seems that document.querySelectorAll does work in IE 8, but not in quirks mode. Sample code fixed to use this and engage standard mode.
Note: My first quick hack of this used a for loop rather than the while:
for (var i=0;i<classList.length;i++) {
classList[i].style.display ="none";
};
Bonus points if you can spot when this will fail (hover mouse to see answer):
if there's an element in the list with the id
length(in which caseclassList.lengthwill refer to that element, not the length of the NodeList.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.