mike182uk
09-07-2008, 11:37 AM
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.
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.