ok. i am having trouble with this code:

<head>
    <script type="text/javascript">
    <!--
    function switchPic(picID)
    {
    document.getElementById(picID).style.display="none";
    }
    //-->
    </script>
    </head>
    <body>
    <a href="" onclick="switchPic(_1)">Click Here</a>
    </body>

when you click the link, it gets the id from the info provided in the link and makes it disappear (thats how its supposed to work). but it doesn't do that. i have seen the same code work on an different site.

thanks,
billy

Recommended Answers

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 …

Jump to Post

All 3 Replies

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).

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>

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

silly me.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.