2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by billymcguffin
0

Assuming you have this div in your page, initially set as div1 for its id.

<div id="div1">Link 1</div>
<a href="javascript:void(0);" onclick="showPic('div1');">Hide Div</a>

it seems that your created function is used for hiding images.
Anyway you can easily create another function that will handle element's inside your page (showing/hiding).

0

Here's a little demo that will show different div's depending on what link's you will click.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Page Template</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

h2 {
  background-color : #ccc;
  border-bottom : 1px solid #708090;
  border-top : 1px solid #708090;
  font : 700 160% "Bernard MT Condensed";
  line-height : 2ex;
  margin-top : 0;
  min-height : 2ex;
  padding : .100em 0em .100em 1em;
  white-space : nowrap; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : 100%;
  overflow : hidden;
  width : 98%;
   }

div.show {
  border : 2px solid;
  margin-bottom : .200em;
  padding : .300em; 
  background-color : #fff;
  font : 700 160% Verdana, Arial, sans-serif;
  width : auto;
}
div.tube {
  border : 1px solid #ccc;
  height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

.hide { display : none; }
.show { display : block; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var showElem;
showElem = function( showID ) {
   div = (( document.getElementById ) ? document.getElementById( showID ) : document.all[ showID ] );
   try {
   div.className = (( div.className === "hide" ) ? "show" : "hide" );
   } catch( e ) {
   div.style.display = (( div.style.display === "none" ) ? "block" : "none" );
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h2>JavaScript Live DEMO!</h2>
<div id="div1" class="hide">DIV 1</div>
<div id="div2" class="hide">DIV 2</div>
<div id="div3" class="hide">DIV 3</div>
<p>
<!-- First Format -->
<a href="javascript:void(0);" onclick="showElem('div1');">Show DIV 1</a><br />
<!-- Second Format -->
<a href="javascript:void(showElem('div2'));">Show DIV 2</a><br />
<a href="javascript:void(0);" onclick="showElem('div3');">Show DIV 3</a><br /></p>
</div>
</div>
</body>
</html>
0

thanks for the help essential, but it just turned out to be me forgetting some quotes.

silly me.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.