Learn VBA & Macros in 1 Week!

JavaScript - Boolean Function To Hide/show Div

Full Excel VBA Course - Beginner to Expert

Boolean Function To Hide/show Div	View Content

Hi, I am very new to javascript and html.

I am trying to create a function which will hide or show a div (div1). Right now, it is always showing the div whether the boolean value is true or false. I know that it is getting inside the else if part, but it doesn't seem to be working.

Code:

<script type="text/javascript">

function hideDiv(flag)
	{
	if (flag == false)
		{
		document.getElementById('div1').style.visibility="visible";
		}
	else if (flag == true)
		{
		document.getElementById(div1).style.visibility="hidden";
		}	
	}

var bool = new Boolean(true)
hideDiv(bool);
</script>

<body>
<div id="div1">
Text!
</div>
</body>

Thank you for taking a look

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Sifr Function For Show/hide Div?

Show/hide Function Not Working In Firefox

Better Function To Hide/show Multiple Rows Of Table

Change Button Function Or Hide/show Button On Different Items

Please Help Me With A Javascript Boolean Function.

Show/hide Div Tag

Hide And Show Div

Need Some Help With Show/hide

Help With Hide/show Div

Div Show/hide All

Show/hide Help Please

Show A Div And Hide Another

Show/hide Element

Show / Hide Div Multiple Div's

Show/hide Onclick

Hide A Div And Show Another Onclick

Show/hide Comments Box

Animate Show/hide Div

Learn VBA & Macros for Excel in 1 Week!

Sifr Function For Show/hide Div?

Similar Tutorials

I have the CoffeeCup Website Font software that gives me a peek at the sIFR Javascript functions, but I can't figure out how to sIFR only the visible Div on my page.

This script (from CoffeeCup) is in my page header:

Quote:
<script type="text/javascript">
//<![CDATA[
var h1_font = {
src: 'websitefontdata/fonts/___1942_report[regular].swf'
};
var h2_font = {
src: 'websitefontdata/fonts/___gatecrasher[regular].swf'
};
var h3_font = {
src: 'websitefontdata/fonts/___High_Strung[regular].swf'
};
var h4_font = {
src: 'websitefontdata/fonts/___Palatino_Linotype[regular].swf'
};
var h5_font = {
src: 'websitefontdata/fonts/___Palatino_Linotype[regular].swf'
};
var h6_font = {
src: 'websitefontdata/fonts/___Beffle[regular].swf'
};
sIFR.useStyleCheck = false;
sIFR.fixHover = true;
sIFR.fitExactly = true;
sIFR.repaintOnResize = true;
sIFR.preserveSingleWhitespace = false;
sIFR.fromLocal = true;
sIFR.activate(h1_font, h2_font, h3_font, h4_font, h5_font, h6_font);
sIFR.replace(h1_font, {selector: 'h1',
css: [
'.sIFR-root { line-height: 1em; font-size: 23px; color: #004080; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #004080; }',
'a:hover { color: #FF0000; }'
],
filters: {
DropShadow: { quality: 3, angle: 45, knockout: false, distance: 2.000000, color: '#000000', strength: 1.000000 }
},
wmode: 'transparent'
});
sIFR.replace(h2_font, {selector: 'h2',
css: [
'.sIFR-root { line-height: 1em; font-size: 18px; color: #006C61; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
DropShadow: { quality: 3, angle: 45, knockout: false, distance: 4.000000, color: '#000000', strength: 1.000000 },
Glow: { quality: 2, strength: 2, blurX: 6.000000, blurY: 6.000000, knockout: 0, inner: 0, alpha: 0.250000, color: '#FFFF00' }
},
wmode: 'transparent'
});
sIFR.replace(h3_font, {selector: 'h3',
css: [
'.sIFR-root { line-height: 1em; font-size: 23px; color: #000000; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
},
wmode: 'transparent'
});
sIFR.replace(h4_font, {selector: 'h4',
css: [
'.sIFR-root { line-height: 1em; font-size: 14px; color: #000000; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #000000; }',
'a:hover { color: #FF0000; }'
],
filters: {
},
wmode: 'transparent'
});
sIFR.replace(h5_font, {selector: 'h5',
css: [
'.sIFR-root { line-height: 1em; font-size: 14px; color: #000080; background-color: #FFFF80; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
},
wmode: 'transparent'
});
sIFR.replace(h6_font, {selector: 'h6',
css: [
'.sIFR-root { line-height: 1em; font-size: 20px; color: #004080; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
filters: {
DropShadow: { quality: 3, angle: 45, knockout: false, distance: 2.000000, color: '#000000', strength: 1.000000 }
},
wmode: 'transparent'
});
//]]>
</script>

Here's what I'm working with to show a specific Div:

Quote:
function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec1').style.visibility = "visible";
else if (ns4) document.layers["sec1"].visibility = "show";
else if (ie4) document.all["sec1"].style.visibility = "visible";
if (ng5) document.getElementById('sec'+n).style.visibility = "visible";
else if (ns4) document.layers["sec"+n].visibility = "show";
else if (ie4) document.all["sec"+n].style.visibility = "visible";
}
How do I have sIFR only draw the visible Divs?

Show/hide Function Not Working In Firefox

Similar Tutorials

Hi
I need help getting my show/hide function to work in all browsers.
The function below works everywhere but Firefox.

Can someone see why it's not working?

My javascript function:

Code:

<script language="javascript" type="text/javascript">
  
function hideShow(el_id){
	var el=document.getElementById(el_id);
	if(el_id.style.display!="none"){
		el_id.style.display="none";
	}else{
		el_id.style.display="";
	}
}

</script>

My php code (sensured):

PHP Code:
$sql="*****";
$result= mssql_query($sql);

echo "<table>";
echo "<tr><th>Header1</th><th>Header2</th><th>Header3</th><th>Header4</th></tr>";

$row=0;
$row2=1;

while($row = mssql_fetch_array($result)) {

    $id=$row["id"];

    $row++;
    $row2++;

    echo "<tr>";
        echo "<td>". $row['field1'] ."</td>";
        echo "<td>". $row['field2'] ."</td>";
        echo "<td><a onclick='hideShow(row$row);'> hide/show details</a></td>";
    echo "</tr>";
    echo "<tr id='row$row' style='display:none;'>";
        echo "<td><b>Input1: </b>". $row['field3']."</td>";
        echo "<td><b>Input2: </b>". $row['field4'] ."</td>";
        echo "<td><b>Input3: </b>". $row['field5'] ."</td>";
        echo "<td><a onclick='hideShow(row$row2)'>Delete this info</a></td>";
    echo "</tr>";
    echo "<tr id='row$row2' style='display:none;'>";
        echo "<td>Are you sure you want to delete?</td>";
        echo "<td><a onClick=menuRequest('$id')>Yes</a></td>";
        echo "<td><a onClick=menuRequest('home')>No</a></td>";
    echo "</tr>";

    $row++;
    $row2++;
}

Better Function To Hide/show Multiple Rows Of Table

Similar Tutorials

Hi to All,

I have a table that contains many rows,
some in italian with code <td nome='riga_i'>
and some in english with code <td name='row_e'>.
I have created two buttons with different background flags: italy and uk,
so when one pushes the button with flag uk, the html page will be reloaded with only english rows,
and when one pushes the button with flag it, the same page is reloaded containing only italian rows.
All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this.

Here the code:

<html>
<head>
<script type="text/javascript">
function toggle(name) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(name)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
//
function toggle(nome) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(nome)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
</script>
</head>

<body onload="toggle('name');">
<table>
<tr nome="riga_i">
<td>REQUISITI RELATVI AL SERVIZIO</td>
<td> </td>
<td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr>
<tr name="row_e">
<td> </td>
<td>REQUIREMENTS RELATED TO THE SERVICE</td>
<td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr>
....
.... and so on....
.....
</table></html>

To better the code I have tried in this way but without success ...

<html>
<head>
<script type="text/javascript">
function toggle(this) {
if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
}
</script>
</head>

Thanks in advance !!!

Change Button Function Or Hide/show Button On Different Items

Similar Tutorials

i'm still a relative noob and this has me stuck -
i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is -

protected function getToolbar()
{
$options = array();
$user = JFactory::getUser();

$create_ms = $user->authorise('core.create', 'com_pfmilestones');
$create_task = $user->authorise('core.create', 'com_pftasks');

$options[] = array(
'text' => 'JSAVE',
'task' => $this->getName() . '.save');

$options[] = array(
'text' => 'Save as new project',
'task' => $this->getName() . '.save2copy',
'options' => array('access' => ($this->item->id > 0)));

PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok'));

item used as template is id=8

any help or suggestions would be greatly appreciated..

Please Help Me With A Javascript Boolean Function.

Similar Tutorials

Hello. If the function called Change has ever been called, the function in window onload is to not be executed. This is what I have so far, but I am sure it's wrong or missing something. I tried to confirm the results with document.write or alert but am having trouble doing so.

Code:

window.onload=function(){

if (calledAtLeastOnce == false) {

Change('big', 'http://www.adomainname.com/image.jpg');
  }
}

function Change(id,src,w,h){
var calledAtLeastOnce = true;

}

Hide/show Div

Similar Tutorials

Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome

I have a script to show and hide various divs based on a function & var.

The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

here is the JS:

Code:

function sitesurveyswitch(emotion) {

	var e = emotion;

	document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
	document.getElementById('FeedbackHate').style.display = 'none';
	document.getElementById('FeedbackOk').style.display = 'none';
	document.getElementById('FeedbackLove').style.display = 'none';
		
	if (e == 'hate')
		document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackHate').style.display = 'block';
	if (e == 'ok')
		document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackOk').style.display = 'block';
	if (e == 'love')
		document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackLove').style.display = 'block';
}

and here is the code related to this function:

Code:

<div id="siteSurveyBox">
				<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
				<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
				<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
			</div>
			
			<div id="FeedbackHate" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackOk" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackLove" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>

Show/hide Div Tag

Similar Tutorials

ok trying to get a Div tag to show if something is True and hide if something is False

JS
Code:

unction eToggle(anctag,darg) 
{
 var ele = document.getElementById('Module1');
   var ele = document.getElementById('Module2');
   var ele = document.getElementById('Module3');
   var ele = document.getElementById('Module4');

  
  if("module1" + "module2" + "module3" + "module4" <40)
  {
    div.id.Failed = "block";
	div.Failed = "Failed";
  }
  else 
  {
	div.style.Passed = "block";
	div.Passed = "show";
  }
}

HTML
Code:

<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

Hide And Show Div

Similar Tutorials

Hi guys, im new to forums and need some help with my website.
I have embed a flash player known as: JW player into my website and put it into a div.
Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif.
How would I set this up?
Im not to familiar about using javascript so im not sure if its even possible.
Anways thx for any help ore suggestions related to this subject.

Hide/show Div

Similar Tutorials

Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link...

<script type="text/javascript">
function show(){
document.getElementById(test).style.display="block";
}

</script>

<div id="test" style="display:none;">
<p>Some text</p>
</div>

<a href="#" onclick="show(); return false;">Show</a>

Need Some Help With Show/hide

Similar Tutorials

Hello,

I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management".

Does anyone know how I resolve ?.

The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link.

------------

Have placed code in attachment as too long for this section

Help With Hide/show Div

Similar Tutorials

this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html

using this code: http://www.linkstraffic.net/programm...nd/movediv.php

heres my code. can someone fix it?

html:

[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris MacDonald - Javascript Assignment 2</title>

<link href="styles/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java.js"></script>

<div id="header">
<div id="logo"><img src="images/beat.png" /></div>
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li>
<li><a href="#">About Us</a></li>
</ul>

</head>

<body>

<div id="content">

<a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a>

<div id="coverlogin">

<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br/>

<p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p>
</div>

</div>
</div>

<div id="footer">
<div id="footertext">Beat Threads - 2010</div>
</div>

</body>
</html>
[CODE]

javascript:

// JavaScript Document

var hh=0;
var interv;

//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{

//Depending on the amount of text, set the maximum height here in pixels
if(hh==40)
{
clearInterval(interv);
return;
}

obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}

function HideBox()
{
obj = document.getElementById("coverlogin");

if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(interv);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}

[CODE]

Can someone fix this for me?

Div Show/hide All

Similar Tutorials

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>

</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>

can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

Show/hide Help Please

Similar Tutorials

I don't know a lot about Javascript... still learning..
I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code:
Code:

<script type="text/javascript" >

function showSample() {
	
  if (document.getElementById('input').value='SW001') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW002') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='block';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW003') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='block';
    document.getElementById('SW004').style.display='none';

  }
    else if (document.getElementById('input').value='SW004') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  
    else if (document.getElementById('input').value='SW005') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='block';

  }

}

</script>


<style type="text/css">
<!--
#main {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	height: 125px;
}
#imageArea {
	float: right;
	width: 200px;
}
#formArea {
	float: left;
	width: 200px;
	height: 125px;
}
.image {
	height: 125px;
	width: 125px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
#SW001 {
	background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
	background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
	background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
	background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
	background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="imageArea">
    <div class="image" id="SW001"></div>
    <div class="image" id="SW002"></div>
    <div class="image" id="SW003"></div>
    <div class="image" id="SW004"></div>
    <div class="image" id="SW005"></div>
  </div>
  
  <div id="formArea">
    <form action="" method="get">
      
      
      <input  type='text' name="input" id='input' />
      <input name="" type="button" onclick="showSample(this.selectedIndex)"/>
      
      
    </form>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated!

Show A Div And Hide Another

Similar Tutorials

Hi all,

Check this code:
PHP Code:
<a>text</a>
<div id="pkg">pkg</div>
<div id="table_pkg">table_pkg</div>

I'd like to show table_pkg and hide pkg when I click on <a>text</a>.
How can I do?

Thank you very much

Show/hide Element

Similar Tutorials

Hey there,
I want a div element only to show when you hover over an anchor of the main menu.
The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions.

That's the menu.

This is what should appear when you're hovering one of the items.
Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor.

Here's the website:www.chabuya.net

I already tried hundreds of show/hide scripts, solving this via css but nothing works for me.
I'd be grateful for any suggestions.

Thanks in advance,
Kevin

Show / Hide Div Multiple Div's

Similar Tutorials

Let me start by saying I'm a noob to JavaScript.

What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got:

Code:

<body>
  <script type="text/javascript">
function toggle_visibility(){
	for(var i = 0,len = arguments.length;i < len; i++){
    var e = document.getElementById(arguments[i]).style,d = e.display;
    e.display = (d == "block") ? "none" : "block";
  }
}
</script>

  <select name="select" id="select">
    <option>0</option>
    <option onclick="toggle_visibility('1');" >1</option>
    <option onclick="toggle_visibility('1','2');">2</option>
    <option onclick="toggle_visibility('1','2','3');">3</option>
    <option onclick="toggle_visibility('1','2','3','4');">4</option>
  </select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>

Any help would be appreciated, cause I'm lost.

Show/hide Onclick

Similar Tutorials

Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance.

HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
background-color: #CC6;
}

</style></head>
<body>

<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1>JavaScript</h1>
</div>
</div>
</div>
<div id="ie6-container-wrap">
<div id="container">
<DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'"
onmouseout="this.style.fontSize='12pt'">
<div id="content">
<h1>Mainframe</h1>
<p>Enter the content of your website within this area.</p>
</div></DIV>
</div>
</div>
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">

<center>

<body onLoad="dateandtime()">

<script>

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate)
}
if (!document.all)
getthedate()
function dateandtime(){
if (document.all)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>
</center>
</div>
</div>
</div>
</body>
</html>

CSS:
body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #597347;
margin: 0;
padding: 0;
background: #beffbf;
}

h1, h2 {
color: #87ac6d;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

#header-container {
height: 90px;
background: url(../images/banner.jpg) repeat-x left bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #beffbf;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 476px;
top: 32px;
}

#header h1 em{
color: #90b874;
font-size: small;
display: block;
}

#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 35px;
right: 0;
}

#header ul li {
float: left;
margin-right: 5px;
}

#header ul li a{
color: #90b874;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}

#header ul li a:hover {
color: #beffbf;
}

#container {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
padding: 90px 0 40px;
}

#content {
float: left;
width: 100%;
}

#sidebar {
float: right;
width: 275px;
margin-top: 10px;
}

#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

#footer-container {
height: 40px;
background-color: #000;
}

#footer {
width: 940px;
margin: 0 auto;
position: relative;
}

Hide A Div And Show Another Onclick

Similar Tutorials

Alright, me having a very basic knowledge of js I'm looking for some help with(what I think should be) a simple hide/show of a set of divs. I've broken down the ccs/html I'm looking at on a test page here - http://www.grinnbarrett.net/test.html

The js I have in the page had been what I tried to modify from a simple hide/show, but it's not doing what I want it to do (obviously). The goal is when you click on link 3, I want white3 to hide and all the other white divs to show, when you click on link 3, white 2 will hide and the other white divs will show, and so on. So basically it's revealing what div you click to. A lot of what I've found have been just toggles, but I'm not very confident in my ability to adjust code.

Any and all help would be appreciated.

Show/hide Comments Box

Similar Tutorials

Good afternoon all,

I need a bit fo help with unhiding a selection. I have a 10 checkboxes on a form. When the user clicks one of the boxes the rest are hidden and a comments box shows. That works great, the part I can't figure out is how to make all the boxes show again if the user unchecks the checkbox and make the comments box hide again.

Here is the code I am using to do the hide:

Code:

function HideComments() 
{
  var a1 = document.getElementById("crmForm_answer1").checked; 
  var a8 = document.getElementById("crmForm_answer8").checked;
  var a2 = document.getElementById("crmForm_answer2").checked; 
  var a3 = document.getElementById("crmForm_answer3").checked; 
  var a4 = document.getElementById("crmForm_answer4").checked; 
  var a5 = document.getElementById("crmForm_answer5").checked; 
  var a6 = document.getElementById("crmForm_answer6").checked; 
  var a7 = document.getElementById("crmForm_answer7").checked;
  var a9 = document.getElementById("crmForm_answer9").checked;
  var a10 = document.getElementById("crmForm_answer10").checked;
 
  if(a1==true)
  {
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }
  else
    document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none';

  if(a8==true)
  {
    document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }
  else
    document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none';

  if(a2==true)
  {
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none';

  if(a3==true)
  {
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none';

  if(a4==true)
  {
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none';

  if(a5==true)
  {
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';    
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none';

  if(a6==true)
  {
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none';

  if(a7==true)
  {
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none';

if(a9==true)
  {
    document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none';

if(a10==true)
  {
    document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block';
    document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none';
    document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none';
  }

  else
    document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none';
}

Thanks in advance for the help,
Sam.

Animate Show/hide Div

Similar Tutorials

hi, here is my Javascript to show and hide my comments div:

Code:

<script language=javascript type='text/javascript'>
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}

function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('comments').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

I would now like to animate the div fading or moving down

can someone please help?

thanks