Hiding and unhiding content

DBneophyte · Aug 18, 2007

Hi,

I have 3 buttons - 'Show Students', 'Show Faculty', 'Show All'

I've got rows of student records and faculty records in tables enclosed by div tags.

eg:

Code:

<div id = "student">
  <table>
   .......
  </table>
</div>

<div id = "faculty">
  <table>
   .......
  </table>
</div>

How do i set it up so that when i click on the 'Show Students' button, the 'faculty' div would get hidden? Likewise, when i click on the 'Show Faculty' button, the 'student' div should get hidden. Clicking on 'Show All' will display both divs...Please help!!!

feherke · Aug 18, 2007

Hi

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
div#student,div#faculty {
  display: none;
}
</style>
<script type="text/javascript">
function ch(what)
{
  document.getElementById('student').style.display=what==2?'none':'block'
  document.getElementById('faculty').style.display=what==1?'none':'block'
}
</script>
</head>
<body>
<form action="#">
<p>
<input type="button" value="Show Students" onclick="ch(1)">
<input type="button" value="Show Faculty" onclick="ch(2)">
<input type="button" value="Show All" onclick="ch(0)">
</p>
</form>
<div id="student">
  <table>
  <tr><td>Student Here</td></tr>
  </table>
</div>
<div id="faculty">
  <table>
  <tr><td>Faculty Here</td></tr>
  </table>
</div>
</body>
</html>

Feherke.

http://rootshell.be/~feherke/

DBneophyte · Aug 20, 2007

Thanks so much...that was a great help!!!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hiding and unhiding content

DBneophyte

Technical User

feherke

Programmer

DBneophyte

Technical User

Similar threads

Part and Inventory Search

Sponsor