• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 366
  • Last Modified:

showing, hiding, and not hiding

I must be going wrong somewhere.

This positions some div's on top of links, and then closes them from links. The close part is clearly where I've messed up here...

Can you offer some advice?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

table#teams
{
      position:absolute;
      top:220px;
      left:123px;
      border:none;
}

.bio
{
      position:absolute;
      top:220px;
      left:123px;
      display:none;
      width:642px;
      background-color:#ffffff;
}

</style>
</head>
<body>
<script type="text/javascript">
<!--
function showBIO(n)
{
      for(var i = 1; i<=11; i++)
      {
            document.getElementById('bio'+i).style.display = (i==n)?'block':'none';
      }
}
function hideBIO(n)
{
      for(var i2 = 1; i2<=11; i2++)
      {
            document.getElementById('bio'+i2).style.display = (i2==n)?'none':'block';
      }
}      
//-->
</script>
      
<table id="teams" cellspacing="0" cellpadding="10">
      <tr>
            <td><a href="javascript:showBIO(1)">John Doe 1</a><br>Consultant</td>
            <td><a href="javascript:showBIO(2)">John Doe 2</a><br>Consultant</td>
            <td><a href="javascript:showBIO(3)">John Doe 3</a><br>Consultant</td>
      </tr>
</table>
      
<div class="bio" id="bio1">
      <h2>John Doe 1, Consultant</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
      <p style="text-align:center;"><a href="javascript:hideBIO(1)">close</a></p>
</div>

<div class="bio" id="bio2">
      <h2>John Doe 2, Consultant</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
      <p style="text-align:center;"><a href="javascript:hideBIO(2)">close</a></p>
</div>

<div class="bio" id="bio3">
      <h2>John Doe 3, Consultant</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
      <p style="text-align:center;"><a href="javascript:hideBIO(3)">close</a></p>
</div>

</body>
</html>


Thanks,
Sean
0
seanpowell
Asked:
seanpowell
1 Solution
 
BatalfCommented:
It doesn't look like you need more than this simpel showBio() and hideBio() function:

<script type="text/javascript">
<!--
function showBIO(n)
{
     document.getElementById('bio'+n).style.display = 'block'
}
function hideBIO(n)
{

     document.getElementById('bio'+n).style.display = 'none'
}    
//-->
</script>
0
 
cLFlaVACommented:
Sean,

Am I missing something?


<script type="text/javascript">
<!--
function showBIO(n)
{
    document.getElementById('bio' + n).style.display = 'block';
}
function hideBIO(n)
{
    document.getElementById('bio' + n).style.display = 'none';
}    
//-->
</script>
0
 
archrajanCommented:
How shud the script suppose to work?
0
 
seanpowellAuthor Commented:
>>Am I missing something?

Yes - Batalf's comment :-)

Thanks so much, you guys are wonderful
Sean
0
 
archrajanCommented:
Sean,

By the way thats a nice way to show div , looks great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now