how to write this javascript code to show/hide for each personal elements?
Question
How can i write this code in a loop ? Actually I am using some different links to show and hide box for each related link. I want to show/hide box for each link showing information related to that link.
function hidedetailbox1()
{document.getElementById("plc1").style.display="none";}
function showdetailbox1()
{document.getElementById("plc1").style.display="block";}
function hidedetailbox2()
{ document.getElementById("plc2").style.display="none";}
function showdetailbox2()
{document.getElementById("plc2").style.display="block"; }
function hidedetailbox3()
{document.getElementById("plc3").style.display="none";}
function showdetailbox3()
{document.getElementById("plc3").style.display="block"; }
function hidedetailbox4()
{document.getElementById("plc4").style.display="none";}
function showdetailbox4()
{document.getElementById("plc4").style.display="block";}
function hidedetailbox5()
{document.getElementById("plc5").style.display="none";}
function showdetailbox5()
{document.getElementById("plc5").style.display="block";}
function hidedetailbox6()
{document.getElementById("plc6").style.display="none";}
function showdetailbox6()
{document.getElementById("plc6").style.display="block";}
function hidedetailbox7()
{document.getElementById("plc7").style.display="none";}
function showdetailbox7()
{document.getElementById("plc7").style.display="block";}
function hidedetailbox8()
{document.getElementById("plc8").style.display="none";}
function showdetailbox8()
{document.getElementById("plc8").style.display="block";}
function hidedetailbox9()
{document.getElementById("plc9").style.display="none";}
function showdetailbox9()
{document.getElementById("plc9").style.display="block";}
function hidedetailbox10()
{document.getElementById("plc10").style.display="none";}
function showdetailbox10()
{document.getElementById("plc10").style.display="block";}
function hidedetailbox11()
{document.getElementById("plc11").style.display="none";}
function showdetailbox11()
{document.getElementById("plc11").style.display="block";}
function hidedetailbox12()
{document.getElementById("plc12").style.display="none";}
function showdetailbox12()
{document.getElementById("plc12").style.display="block";}
function hidedetailbox13()
{document.getElementById("plc13").style.display="none";}
function showdetailbox13()
{document.getElementById("plc13").style.display="block";}
5 answers
solution1
5 ACCPTED 2012-02-21 07:00:00
You could use a function like this...
var toggleDisplay = function(i, hide) {
document.getElementById('plc' + i).style.display = hide ? 'none' : '';
}
You pass it the number (as i ) and whether it should hide or reset (as hide ) the display property.
solution2
1 2012-02-21 07:00:09
function hidedetailbox(id){
....
solution3
1 2012-02-21 07:03:40
Since you mentioned jquery. You can use toggle
$('.boxlink').click(function(e) {
$($(e.target).attr('href')).toggle();
return false;
});
Your links in HTML will look something like this:
<a href="#plc1" class="boxlink"> Toggle PLC 1</a>
<a href="#plc2" class="boxlink"> Toggle PLC 2</a>
solution4
1 2012-02-21 07:05:33
Suppose you have 10 comments listed in the page,
when you display it from the server, in your server script keep a count like
<div id="1">comment1</div>
<div id="2">comment2</div>
<div id="3">comment3</div>
etc...
if it's any other content like a image, you can use
<...name="1"....>
now you can handle them in a loop like this,
for(i++){
getElementById(i); //handle it the way you want here.
}
further if you have a specific name for the element, you can concat with the "i" like getElementById("comment"+i);
Suggestion: you can use jquery to do this for you
.toggle() .show() .hide() can be a good thing to look at.. Good luck :)
solution5
0 2012-02-22 01:08:49
toggle example:
<html>
<head>
<script type="text/javascript">
var toggleDisplay = function(id) {
if (document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>
<table>
<tr><td onmouseover="toggleDisplay(1);">Test toggle</td><td id=1 name=1 >Toggle me!</td></tr>
</table>
</body>
</html>
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.