DIV Show/Hide

**TimFA** · 09-17-2007, 02:35 AM

Ok, I want to have something simple, that just writes to a DIV some HTML code. I've looked, and found some, but none work quite the way I want. All I want is something simple.

**thetestingsite** · 09-17-2007, 04:43 AM

Code:

<script type="text/javascript">
 function showHide(obj) {
   var div = document.getElementById(obj);
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
 }
</script>

Then call it like so:

Code:

<a href="#" onclick="showHide('hidden_div'); return false;">Some Text</a>

<div id="hidden_div" style="display: none;">
  Hidden Text is here!!!!!
</div>

Hope this is what you mean. If not, please be more specific in your request.

**TimFA** · 09-18-2007, 01:47 AM

Thanks thetestingsite. Sorry my post wasn't very good, I was in a hurry.

**TimFA** · 09-21-2007, 09:32 PM

Ok. Problem, I cannot style with my external style-sheet. If I insert the display: none into external the JavaScript no longer effects it, if its in the page the browser ignores external style commands. Any ideas guys?

**TimFA** · 09-24-2007, 11:36 PM

Anyone?

**codeexploiter** · 09-25-2007, 06:47 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Test Document</title>
		<link rel="stylesheet" type="text/css" href="one.css" />
		<script type="text/javascript">
			function showHide(id){
				var objDisp = document.getElementById(id).style.display;
				var objDiv = document.getElementById(id);
								
				if(objDisp == 'none' || objDisp == '')
					objDiv.style.display = 'block';
				else
					objDiv.style.display = 'none';
			}
			
			var iCntr = 0;
			var sCurId;
			var sNewId;
			function changeDivId() {
                    if(iCntr == 0) {
                         sCurId = 'hidden_div';
                         sNewId = 'newId';
                         iCntr++;
                         document.getElementById(sCurId).id = newId;        
     			} else {
                         document.getElementById(sCurId).id = newId;
                    }
      
                    var temp = sCurId;
                    sCurId = newId;
                    newId = temp;     
               }
		</script>
	</head>
	<body>
		<p><a href="#" onclick="showHide('hidden_div'); return false;">Some Text</a>&nbsp;&nbsp;<a href="#" onclick="changeDivId(); return false;">Other Test</a></p>
		<div id="hidden_div">
		  Hidden Text is here!!!!!
		</div>
	</body>
</html>

Code:

one.css

#hidden_div {
	display: none;
}

#newId {
	display: block;
}

Check the above example which will show/hide the div based on two different methods. You can use the first and second links to check them out.

**TimFA** · 09-26-2007, 12:16 AM

For some reason it shows no background color or borders...?

Code:

div#hidden_div
{
margin: auto;
display: none;
border-right: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
height: 20px;
width: 350px;
background-color: #000000;
}

Thats my CSS.

**codeexploiter** · 09-26-2007, 03:25 AM

It should use the background color you've used in your CSS once you display the element as your CSS contains a display: none item by default the element will be hidden.

Another problem is when you show the element either you specify a background image or another background color.

If you provide a link or your source code that would be easy for us to troubleshoot.

**TimFA** · 09-26-2007, 11:24 PM

I found it, my main browser (Firefox) doesn't show it correctly, but IE does. FF overlays it when ever you click, IE pushes everything down for it. Also, my sites not uploaded, my host is having some FTP problems at the moment.

**TimFA** · 09-27-2007, 09:57 PM

Check these out, screen shots of IE and FF. Heres my code:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link rel="shortcut icon" href="images/favicon.ico">
  <link rel="stylesheet" href="css/layout.css"
 type="text/css">
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Fassist | Home</title>
  <script type="text/javascript" language="JavaScript"
 src="jscripts/search.js">
  </script>
</head>
<body>
<div id="top">
<img id="logo" alt="Fassist Logo" title="Fassist Logo"
 src="images/small_logo.png"><br>
<div id="menu">
<div id="spacer1"></div>
<div id="linkbox_1"><a href="http://fassist.webng.com/"><img
 id="home"
 onmouseout="this.src='images/homebuttons/homebutton_inactive.png'"
 onmouseover="this.src='images/homebuttons/homebutton_active.png'"
 alt="Home" title="Home"
 src="images/homebuttons/homebutton_inactive.png"></a><br>
</div>
<div id="linkbox_2"><a href="/example"><img
 id="example"
 onmouseout="this.src='images/examplebuttons/examplebutton_inactive.png'"
 onmouseover="this.src='images/examplebuttons/examplebutton_active.png'"
 alt="Example" title="Example"
 src="images/examplebuttons/examplebutton_inactive.png"></a>
<br>
</div>
<div id="linkbox_3"><a href="/request">Request</a></div>
<div id="linkbox_4"><a href="/link2us">Link2Us</a></div>
<div id="linkbox_5"><a href="/gallery">Gallery</a></div>
<div id="linkbox_6"><a href="/contact">Contact</a></div>
<div id="linkbox_7"><a href="#"
 onclick="showHide('hidden_div'); return false;">Search</a></div>
<div id="spacer2"></div>
</div>
<div id="hidden_div">
<form method="get" action="http://www.google.com/search"><input
 id="searchbox" name="q" size="25" maxlength="255"
 value="" type="text"><input id="searchbutton"
 value="Google Search" type="submit"></form>
</div>
</div>
<div id="main">
Some text...</div>
<a href="http://validator.w3.org/check?uri=referer"><img
 id="w3c" src="http://www.w3.org/Icons/valid-html401-blue"
 alt="Valid HTML 4.01 Transitional"></a>
</body>
</html>

CSS:

Code:

BODY
{ 
text-align: center;
background-color: #000000;
}

div#top
{
margin: auto;
height: 100px;
width: 650px;
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
background-color: #1C1C1C;
}

img#logo
{
height: 75px;
width: 75px;
border: 0px;
}

div#menu
{
margin: auto;
height: 20px;
width: 428px;
background-color: #1C1C1C;
}

div#linkbox_1
{
background-color: #000000;
border-top: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
height: 20px;
width: 60px;
float: left;
}

img#home
{
border: 0px;
height: 20px;
width: 60px;
}

div#linkbox_2, div#linkbox_3, div#linkbox_4, div#linkbox_5, div#linkbox_6
{
border-top: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
height: 20px;
width: 60px;
float: left;
background-color: #000000;
}

img#example
{
border: 0px;
height: 20px;
width: 60px;
}

img#request
{
border: 0px;
height: 20px;
width: 60px;
}

img#link2us
{
border: 0px;
height: 20px;
width: 60px;
}

img#gallery
{
border: 0px;
height: 20px;
width: 60px;
}

img#contact
{
border: 0px;
height: 20px;
width: 60px;
}

div#linkbox_7
{
border-top: 1px #4F4F4F solid;
border-right: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
height: 20px;
width: 60px;
float: left;
background-color: #000000;
}

img#search
{
border: 0px;
height: 20px;
width: 60px;
}

div#hidden_div
{
background-color: #000000;
margin: auto;
display: none;
height: 20px;
width: 350px;
}

#searchbox
{
background-color: #000000;
color: white;
border: 1px #CCCCCC solid;
}


#searchbutton
{
color: white;
border: 1px #CCCCCC solid;
background-color: #000000;
}

div#main
{
margin: auto;
height: 700px;
width: 650px;
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
background-color: #1C1C1C;
}

#read
{
color: #FF0000;
}

img#w3c
{
height: 31px;
width: 88px;
border: 0px;
}

A:link
{
text-decoration: none; color: #FFFFFF;
}

A:visited
{
text-decoration: none; color: #FFFFFF;
}

A:hover
{
text-decoration: none; color: #CCCCCC;
}

WHY IE, WHY!?

EDIT: Ok, I cleaned up the code and added in the fix for IE transparency, as to why my lines down I don't know... Its like IEs putting in padding, if I reduce size of image 1px, then the bar comes up 1px... I'm confused.

EDIT2: Hmm, I was messing with the code and for some reason even though I removed the background color of black (IE was applying it I thought) it remains black... I've refreshed, restarted, and cleared cache...IE sucks, Opera messes it up SLIGHTLY but its nothing that looks messed up.

EDIT3: Ok, hopefully my final edit, I got IE to display almost right, all thats left is the stupid almost-padding/margin problem. I uploaded a update of what IE looks like.

Thread: DIV Show/Hide

Thread Tools

Search Thread

DIV Show/Hide

Bookmarks

Bookmarks

Posting Permissions