...

View Full Version : is there a simpler way to write this code



mike182uk
09-07-2008, 12:37 PM
hi there. i have wrote a bit of code and it works pefectly fine. but what i would like to no is: is there a simpeler way to write this or have i wrote it correctly?

basically the code shows or hides a series of divs depending which link is clicked. so when one div is showing the other 3 should be hidden. The relevant link shows the relevant div and hides any other divs that are showing. i have done this using javascript to edit the css properties (display: block, or display:none)

here is the code: (i have posted the full code so you can understand what is going on)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

function defaultpara()
{
document.getElementById("sub1content").style.display = 'block';
}


function showpara(id)
{
var e = document.getElementById(id);

if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'block'

}

function hidepara(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'none'
}


</script>


<style type="text/css">
<!--
#wrapper {
height: 300px;
background-color: #FFFFFF;
width: 600px;
}
#links {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#links li {
display: inline;
}
#links li a {
text-decoration: none;
color: #000000;
padding-left: 10px;
padding-right: 60px;
background-color: #666666;
}
#wrapper p {
background-color: #E4E4E4;
padding: 4px;
margin-top: 0px;
}
#sub1content {
display: none;
}
#sub2content {
display: none;
}
#sub3content {
display: none;
}
#sub4content {
display: none;
}
#links li a:hover {
background-color: #A7A7A7;
}
-->
</style>
</head>


<body onload="defaultpara()">

<div id="wrapper">

<ul id="links">
<li><a href="#" onclick="showpara('sub1content'); hidepara('sub2content'); hidepara('sub3content'); hidepara('sub4content')">sub1</a></li>
<li><a href="#" onclick="showpara('sub2content'); hidepara('sub1content'); hidepara('sub3content'); hidepara('sub4content')">sub2</a></li>
<li><a href="#" onclick="showpara('sub3content'); hidepara('sub1content'); hidepara('sub2content'); hidepara('sub4content')">sub3</a></li>
<li><a href="#" onclick="showpara('sub4content'); hidepara('sub1content'); hidepara('sub2content'); hidepara('sub3content')">sub4</a></li>
</ul>

<p id="sub1content">sub1content</p>

<p id="sub2content">sub2content</p>

<p id="sub3content">sub3content</p>

<p id="sub4content">sub4content</p>
</div>

</body>
</html>


I am just wondering if there is a more efficient way rather than calling the fucntion hidepara 3 times when the link is clicked.

thank you for any help recieved.

abduraooft
09-07-2008, 01:13 PM
Try something like

function showpara(value){
for(var i=1;i<=4;i++)
document.getElementById('sub'+i+'content').style.display='none';

document.getElementById('sub'+value+'content').style.display='block';

}

<a href="#" onclick="showpara(3);">sub3</a>

mike182uk
09-07-2008, 02:59 PM
thanks alot abduraooft for looking at this. the way you have done it is a hell of alot more effiecient then the way i would of done it. i dont know why i didnt think of using a loop myself (i dont understand javascript too well, but im learning). so yeah thanks alot.

also thanks alot to Cranford for your reply to this aswell. your way is different to mine and abduraooft's but in terms of simplicity and effiency i think abduraooft's method is best and most practical. but your help is most appreciated so yeh, thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum